:root {
	/* --border-color: #eee; */
}
* {
	box-sizing: border-box;
}
.cube-container {
	position: relative;
	width: 300px;
	height: 300px;
	perspective: 1000px;
	margin: auto;
}

.cube {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 1s cubic-bezier(0.32, 0.05, 0.35, 1.6);
}

.cube-face-image {
	display: block;
	position: absolute;
	width: 300px;
	height: 300px;
}


/* Transform images to create cube */

.image-1 {
	transform: translateZ(150px);
}

.image-2 {
	transform: rotateX(-180deg) translateZ(150px);
}

.image-3 {
	transform: rotateY(90deg) translateZ(150px);
}

.image-4 {
	transform: rotateY(-90deg) translateZ(150px);
}

.image-5 {
	transform: rotateX(90deg) translateZ(150px);
}

.image-6 {
	transform: rotateX(-90deg) translateZ(150px);
}

/* Transform cube to show correct image */

.cube.initial-position {
	transform: translateZ(-150px) translateY(0) rotateX(-20deg) rotateY(-10deg) rotateZ(-10deg);
}

.cube.show-image-1 {
	transform: translateZ(-150px);
}

.cube.show-image-2 {
	transform: translateZ(-150px) rotateX(180deg);
}

.cube.show-image-3 {
	transform: translateZ(-150px) rotateY(-90deg);
}

.cube.show-image-4 {
	transform: translateZ(-150px) rotateY(90deg);
}

.cube.show-image-5 {
	transform: translateZ(-150px) rotateX(-90deg);
}

.cube.show-image-6 {
	transform: translateZ(-150px) rotateX(90deg);
}


@media screen and (max-width: 414px) {
	.cube-container {
		width: 200px;
		height: 200px;
	}
	.cube-face-image {
		width: 200px;
		height: 200px;
	}
	.image-1 {
		transform: translateZ(100px);
	}
	.image-2 {
		transform: rotateX(-180deg) translateZ(100px);
	}
	.image-3 {
		transform: rotateY(90deg) translateZ(100px);
	}
	.image-4 {
		transform: rotateY(-90deg) translateZ(100px);
	}
	.image-5 {
		transform: rotateX(90deg) translateZ(100px);
	}
	.image-6 {
		transform: rotateX(-90deg) translateZ(100px);
	}
	.cube.initial-position {
		transform: translateZ(-100px) translateY(0) rotateX(-20deg) rotateY(-10deg) rotateZ(-10deg);
	}
	.cube.show-image-1 {
		transform: translateZ(-100px);
	}
	.cube.show-image-2 {
		transform: translateZ(-100px) rotateX(180deg);
	}
	.cube.show-image-3 {
		transform: translateZ(-100px) rotateY(-90deg);
	}
	.cube.show-image-4 {
		transform: translateZ(-100px) rotateY(90deg);
	}
	.cube.show-image-5 {
		transform: translateZ(-100px) rotateX(-90deg);
	}
	.cube.show-image-6 {
		transform: translateZ(-100px) rotateX(90deg);
	}
}