.poster
	.heading möd
	.frame
	- 24.times do
		.cube
			- 4.times do
				.side

$s: 5em
$n: 24
body
	height: 100vh
	background: lighten(#ffe536, 3)
.poster
	width: 400px
	overflow: hidden
	position: relative
	background: #ffe536
	margin: 30px auto
	box-shadow: 5px 5px 10px 0 rgba(#000, .3)
	&:after
		content: ''
		display: block
		padding-top: 150%
.frame
	position: absolute
	left: 15px
	top: 15px
	right: 15px
	bottom: 15px
	border: 2px solid white
	z-index: 1
.heading
	left: 50%
	top: 10%
	transform: translate(-50%, -50%)
	color: #fff
	position: absolute
	color: white
	font-size: 3em
.cube
	position: absolute
	left: 50%
	top: 105%
	margin: -.5*$s
	width: $s
	height: $s
	animation: animation_rotate 5s ease-in-out both infinite
	&:nth-child(even)
		z-index: 0
	&:nth-child(odd)
		z-index: 2
	@for $i from 1 through $n
		&:nth-child(#{$i})
			width: $s*$i/2
			height: $s*$i/2
			margin: -.5*$s*$i/2
			animation-delay: .1s*$i
.side
	position: absolute
	height: 50%
	border-left: 2px solid #6e6e6e
	&:after
		content: ''
		position: absolute
		left: 0px
		right: 0
		top: 0
		height: 15%
		background: #fff
		opacity: .9
	&:nth-child(1)
		top: 0
		left: 50%
		transform-origin: center top
		transform: rotatez(90deg) skewx(45deg)
		&:after
			width: 1em
	&:nth-child(2)
		top: 0
		left: 50%
		transform-origin: center top
		transform: rotatez(-90deg) skewx(-45deg) rotatey(180deg)
		&:after
			width: 1em
	&:nth-child(3)
		bottom: 0
		left: 50%
		transform-origin: center bottom
		transform: rotatez(-90deg) skewx(-45deg)
	&:nth-child(4)
		bottom: 0
		left: 50%
		transform-origin: center bottom
		transform: rotatez(90deg) skewx(45deg)

@keyframes animation_rotate
	to
		transform: rotatex(-.5turn)