<div class="row">
	<div class="wrapper" style="--width:220px; --height:100px;--duration: 14s; --offset:-6s">
		<div class="rotate">
			<a href="https://open.spotify.com/track/6oDjm30FUtB8GcckQEh3Tr?si=1s6UXE3qQr23q1Cs80ZR3A" target="_blank" class="front image-banner t-white">
				<img src="https://i.scdn.co/image/b36667408f857642df1af7b2279eec5aadf51d0c" alt="">
				<div class="text">
					<div class="b">Breakfast In Bed</div>
					<div>Dntel</div>
				</div>
			</a>
			<a href="https://open.spotify.com/track/0OvhFCkLYdLSypCNHITORc?si=8J_B3MIgTQKUYhJCUOUFuQ" target="_blank" class="bottom image-banner">
				<div class="text">
					<div class="b">Harrison Ford</div>
					<div>Darlingside</div>
				</div>
				<img src="https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314" alt="">
			</a>
			<a href="https://open.spotify.com/track/7FSqGltIongF1SGwvVXlzm?si=tdf5H1r8RJKhYcc5YI6-Mw" target="_blank" class="back image-banner t-white">
				<img src="https://i.scdn.co/image/c8136476534c35d60569b0be9f01b4587640073b" alt="">
				<div class="text">
					<div class="b">Monster</div>
					<div>Magic Bronson</div>
				</div>
			</a>
			<a href="https://open.spotify.com/track/4ebsjAw316emhy51exMQdK?si=GFus0NQKR2atvHBpOFnz9Q" target="_blank" class="top image-banner t-white">
				<div class="text">
					<div class="b">HEY YOU!</div>
					<div>Edu</div>
				</div>
				<img src="https://i.scdn.co/image/e77befa063c9f18a5710b56db88e9973b131a3da" alt="">
			</a>
		</div>
	</div>
	<div class="square"></div>
	<div class="square"></div>
</div>
<div class="row">
	<div class="column">
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<div class="wrapper" style="--width:220px; --height:220px; --offset:-4s">
		<div class="rotate">
			<a href="https://codepen.io/z-/pen/XPQyMo" target="_blank" class="front backgroundimage" style="background-image:url(https://i.imgur.com/tyb17ct.png); background-color:#323133;"></a>
			<a href="https://codepen.io/z-/pen/ZMbLNM" target="_blank" class="bottom backgroundimage" style="background-image:url(https://i.imgur.com/i9LrIoq.png); background-color:#4A89DC;"></a>
			<a href="https://codepen.io/z-/pen/OBPJKK" target="_blank" class="back backgroundimage" style="background-image:url(https://i.imgur.com/Zj5MXDQ.png); background-color:#CCD1D9;"></a>
			<a href="https://codepen.io/z-/pen/MJKNJZ" target="_blank" class="top backgroundimage" style="background-image:url(https://i.imgur.com/KRdYPi8.png); background-color:#8067B7;"></a>
		</div>
	</div>
	<div class="column">
		<div class="square"></div>
		<div class="row">
			<div class="square small"></div>
			<div class="square small"></div>
		</div>
		<div class="row">
			<div class="square small"></div>
			<div class="square small"></div>
		</div>
	</div>
</div>

<div class="row">
	<div class="square long"></div>
	<div class="square"></div>
	<div class="wrapper" style="--width:100px; --height:100px; --offset:-14s; --duration: 20s;">
		<div class="rotate">
			<a href="https://codepen.io/z-" target="_blank" class="front icon t-white" style="font-size:3rem; background:#323133;"><i class="fab fa-codepen"></i></a>
			<a href="#thirdbottom" class="bottom icon t-white" style="font-size:3rem; background:#7289da;"><i class="fab fa-discord"></i></a>
			<a href="#thirdback" class="back icon t-white" style="font-size:3rem; background:#ff0000;"><i class="fab fa-youtube"></i></a>
			<a href="https://twitter.com/Osorpenke" target="_blank" class="top icon t-white" style="font-size:3rem; background:#1da1f2;"><i class="fab fa-twitter"></i></a>
		</div>
	</div>
</div>

body {
	--animation-duration: 16s;
	--tile-width: 200px;
	--tile-height: 100px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	font-family: 'Roboto', sans-serif;
	.row {
		display:flex;
		flex-direction:row;
		>*:not(.row):not(.column), .row>*:not(.row):not(.column), .column>*:not(.row):not(.column) {
			margin:10px;
		}
	}
	.column {
		display:flex;
		flex-direction:column;
	}
	.wrapper .rotate >*, .square {
		box-shadow:0 0 0 0px rgba(255, 255, 255, 0.3);
		&:hover {
			box-shadow:inset 0 0 0 2px rgba(255, 255, 255, 0.5);
		}
	}
	.wrapper {
		width: var(--width);
		height: var(--height);
		display:inline-block;
		perspective: 0px;
		perspective-origin: 50% 50%;
		cursor: pointer;
		.rotate {
			position: relative;
			width: var(--width);
			transform-style: preserve-3d;
			transform-origin: 0 calc(var(--height)/2);
			animation: spin var(--duration, var(--animation-duration)) infinite ease var(--offset, 0s);
			&:hover { //On hover the animation is paused, pointer events is disabled while rotating
				animation-play-state:paused;
			}
			>a {
				color:inherit;
				text-decoration:none;
			}
			.front {
				background:#ED5565;
				transform: translateZ(calc(var(--height)/2));
			}
			.bottom {
				background:#FFCE54;
				transform: rotateX(-90deg) translateY(calc(var(--height)/2));
				transform-origin: bottom center;
			}
			.back {
				background:#2ECC71;
				transform: translateZ(calc(var(--height)/-2)) rotateX(180deg);
			}
			.top {
				background:#5D9CEC;
				transform: rotateX(-270deg) translateY(calc(var(--height)/-2));
				transform-origin: top center;
			}
			>* {
				position: absolute;
				width: var(--width);
				height: var(--height);
				transition:.25s -.1s;
				&.t-white {
					color:white;
				}
				&.image-banner {
					display:flex;
					flex-direction:row;
					align-items:center;
					>*:not(img) {
						flex-grow:1;
					}
					>* {
						margin:10px 0 10px 10px;
						&:first-child {
							margin-left:10px;
						}
						&:last-child {
							margin-right:10px;
						}
					}
					img {
						height:calc(100% - 20px);
					}
					.text {
						display:flex;
						flex-direction:column;
						.b {
							font-weight:bold;
						}
					}
				}
				&.backgroundimage {
					background-size:200px 200px;
					background-position:center;
					background-repeat:no-repeat;
				}
				&.icon {
					line-height:var(--height);
					text-align:center;
				}
			}
		}
	}
	.square {
		background:#CCD1D9;
		width: var(--tile-height);
		height: var(--tile-height);
		cursor: pointer;
		transition:.25s -.1s;
		&.small {
			width: calc(var(--tile-height)/2 - 10px);
			height: calc(var(--tile-height)/2 - 10px);
		}
		&.long {
			width: calc(var(--tile-height) * 2 + 20px);
			height: var(--tile-height);
		}
	}
}

@keyframes spin {
	10.001%, 15%, 35.001%, 40%, 60.001%, 65%, 85.001%, 90% {
		pointer-events: none; //Cannot hover while rotating
	}
	0%, 10% {
		transform: rotateX(0);
		pointer-events: initial;
	}
	15.001%, 25%, 35% {
		transform: rotateX(90deg);
		pointer-events: initial;
	}
	40.001%, 50%, 60% {
		transform: rotateX(180deg);
		pointer-events: initial;
	}
	65.001%, 75%, 85% {
		transform: rotateX(270deg);
		pointer-events: initial;
	}
	90.001%, 100% {
		transform: rotateX(360deg);
		pointer-events: initial;
	}
}