.smartphone {
	img {
		width: 100%;
	}
	display: block;
	position: relative;
	max-width: 320px;
	margin: auto;
	border: 16px black solid;
	border-top-width: 60px;
	border-bottom-width: 80px;
	border-radius: 36px;
	background: black;
	&:before {
		content: '';
		display: block;
		width: 60px;
		height: 5px;
		position: absolute;
		top: -30px;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #333;
		border-radius: 10px;
	}
	&:after {
		content: '';
		display: block;
		width: 20%;
		aspect-ratio: 1;
		position: absolute;
		left: 50%;
		bottom: -96px;
		transform: translate(-50%, -50%);
		background: #333;
		border-radius: 50%;
	}
}

.laptop {
	img {
		width: 100%;
	}
	display: block;
	width: 100%;
	border-radius: 6px;
	border-style: solid;
	border-color: black;
	border-width: 12px;
	background-color: black;
	position: relative;
	&:after {
		content: '';
		position: absolute;
		width: calc(100% + 3em);
		height: 7%;
		left: -1.5em;
		bottom: -9%;
		background: #333;
		border-radius: 0 0 100em 100em;
	}
	&:before {
		content: '';
		position: absolute;
		width: 25%;
		height: 2%;
		left: 37.5%;
		bottom: -4%;
		background: #777;
		z-index: 2;
	}
	margin-bottom: 3.7%;
 }

.screenshot {
	img {
		width: 100%;
	}
	position: relative;
	width: 100%;
	&:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	&.pc {
		img {padding: 1.1% 1.2%;}
		margin-bottom: 21.25%;
		&:after {
			height: 140%;
			background: url('/images/frames/pc.svg');
			background-repeat: no-repeat;
		}
	}
	&.macbook {
		img {padding: 2.9% 11.75% 0;}
		margin-bottom: 11.25%;
		&:after {
			height: 250%;
			background: url('/images/frames/macbook.svg');
			background-repeat: no-repeat;
		}
	}
}