mixin phone()
	.phone
		.notch
			.notch-speaker
			.camera
		.side-btns
			.lock-btn
			.vol-up-btn
			.vol-down-btn
		.bottom
			- for (var a = 0; a < 6; ++a) {
				.speaker-circle
			- }
			.speaker-circle-lg
			.headphone-jack
			.speaker-circle-lg
			- for (var b = 0; b < 6; ++b) {
				.speaker-circle
			- }
		.screenshot
		
main
	.surface
		- for (var x = 0;x < 5;++x) {
			.column
				- for (var y = 0;y < 4;++y) {
				+phone()
				- }
		- }

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(20px + (40  - 20) * (100vw - 320px)/(960 - 320));
}
body {
	font: 1em "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.5;
}
main, .phone {
	position: relative;
}
main {
	background-color: #d8d8d8;
	font-size: 0.5em;
	margin: auto;
	overflow: hidden;
	width: 40em;
	height: 30em;
}
.surface, .notch, .side-btns, .bottom {
	position: absolute;
}
.notch, .bottom, .surface {
	display: flex;
}
.notch, .bottom {
	align-items: center;
}

/* Layout */
.surface {
	animation: scroll 2s ease-in-out infinite;
	justify-content: space-between;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotateX(45deg) rotateZ(-30deg);
	width: 60em;
	height: 60em;
}
.column:nth-of-type(3n + 1) {
	transform: translateY(3.3em);
}
.column:nth-of-type(3n + 2) {
	transform: translateY(-6.6em);
}

/** iPhones **/
.phone, .notch, .side-btns > div {
	background-color: #fcfcfc;
}
.phone {
	border-radius: 1.25em;
	box-shadow:
		0.2em -0.2em 0.5em rgba(0,0,0,0.2) inset,
		-0.2em 0.1em 0.2em rgba(0,0,0,0.3);
	margin-bottom: 3em;
	padding: 0.5em 0.5em 0.5em 1em;
	width: 10em;
	height: 20em;
}
/* Notch */
.notch {
	border-radius: 0 0 0.75em 0.75em;
	box-shadow: 0 0.1em 0.04em 0.04em rgba(0,0,0,0.1);
	justify-content: center;
	top: 0;
	left: 2.75em;
	width: 5em;
	height: 1.5em;
	z-index: 9;
}
.notch-speaker {
	background-color: #ddd;
	border-radius: 0.1em;
	box-shadow: 0 0.05em 0.05em rgba(0,0,0,0.2) inset;
	margin-right: 0.5em;
	width: 1.4em;
	height: 0.2em;
}
.camera {
	background-color: #ddd;
	background-image:
		radial-gradient(at top right,rgb(255,255,255) 30%, rgba(255,255,255,0) 50%),
		radial-gradient(at bottom left,rgb(255,255,255) 30%, rgba(255,255,255,0) 50%);
	border-radius: 50%;
	box-shadow: 0 0 0 0.05em rgba(0,0,0,0.2) inset;
	width: 0.4em;
	height: 0.4em;
}
/* Side buttons */
.side-btns {
	top: 2em;
	left: -0.1em;
	width: 0.5em;
	height: 9em;
	transform: skewY(-45deg);
}
.side-btns > div {
	box-shadow:
		-0.04em 0 0 0 rgba(255,255,255,0.7) inset,
		0.1em 0 0.1em 0.1em rgba(0,0,0,0.1) inset,
		0 0 0.1em 0.1em rgba(0,0,0,0.1);
}
.lock-btn {
	border-radius: 0.15em;
	margin-bottom: 1em;
	width: 0.2em;
	height: 0.8em;
}
.vol-up-btn, .vol-down-btn {
	border-radius: 0.2em;
	margin-bottom: 0.5em;
	width: 0.3em;
	height: 1.6em;
}
/* Bottom */
.bottom {
	justify-content: space-between;
	bottom: 0;
	left: 1.5em;
	width: 7em;
	height: 0.5em;
	transform: skewX(-30deg);
}
.speaker-circle, .speaker-circle-lg {
	background-color: #999;
	border-radius: 50%;
}
.speaker-circle {
	box-shadow: 0 -0.1em 0 rgba(255,255,255,0.9) inset;
	width: 0.25em;
	height: 0.25em;
}
.speaker-circle-lg {
	box-shadow: 0 -0.2em 0 rgba(255,255,255,0.9) inset;
	width: 0.4em;
	height: 0.4em;
}
.headphone-jack {
	box-shadow:
		0 0.2em 0.1em #888 inset, 
		0 -0.2em 0 0 rgba(255,255,255,0.7) inset;
	border-radius: 0.2em;
	margin: 0 0.1em;
	width: 1.5em;
	height: 0.4em;
}
/* Screenshots */
.screenshot {
	background-color: #202a20;
	background-image: url(https://s22.postimg.cc/7xcwzaikx/iphonex_ss.jpg);
	background-size: 42.5em 18.25em;
	border-radius: 0.75em;
	box-shadow: 0 0 0.1em 0.1em rgba(0,0,0,0.1) inset;
	display: block;
	width: 8.5em;
	height: 18.25em;

}
.column:nth-of-type(1) .screenshot {
	background-position: -8.5em 0;
}
.column:nth-of-type(2) .screenshot {
	background-position: -17em 0;
}
.column:nth-of-type(4) .screenshot {
	background-position: -25.5em 0;
}
.column:nth-of-type(5) .screenshot {
	background-position: -34em 0;
}

@keyframes scroll {
	from {
		transform: translate(-50%,-50%) rotateX(45deg) rotateZ(-30deg) translateY(0);
	}
	to {
		transform: translate(-50%,-50%) rotateX(45deg) rotateZ(-30deg) translateY(-23em);
	}
}