@property --expand {
	syntax: "<number>";
	initial-value: 1;
	inherits: false;
}

/* =========================
   Main Animation
========================= */

@keyframes rotateAnimation {
	0% {
		transform: rotateY(10deg);
		--expand: 1;
	}

	2% {
		--expand: 2;
	}

	10% {
		transform: rotateY(170deg);
		--expand: 1;
	}

	49% {
		transform: rotateY(190deg);
	}

	51% {
		--expand: 2;
	}

	59% {
		transform: rotateY(350deg);
		--expand: 1;
	}

	100% {
		transform: rotateY(370deg);
		--expand: 1;
	}
}

/* =========================
   Wrapper (design frame: 808 × 515)
========================= */

.front-back-animation {
	--fba-max-width: 808px;
	--fba-aspect-w: 808;
	--fba-aspect-h: 515;
}

.front-back-animation .animation-perspective {
	perspective: 1000px;
	perspective: inherit;
	width: 100%;
	max-width: var(--fba-max-width);
	margin: auto;
}

.front-back-animation img {
	max-width: 100%;
	height: auto;
}

.front-back-animation .animation-wrapper {
	position: relative;
	width: 100%;
	max-width: var(--fba-max-width);
	aspect-ratio: var(--fba-aspect-w) / var(--fba-aspect-h);
	height: auto;
	transform-style: preserve-3d;
	animation: rotateAnimation 7s infinite reverse;
	/*--plane-1: calc(-100 * var(--expand));*/
	--plane-1: calc(0 * var(--expand));
	--plane-2: calc(-50 * var(--expand));
	--plane-3: calc(0 * var(--expand));
	--plane-4: calc(50 * var(--expand));
	--plane-5: calc(80 * var(--expand));
	--plane-6: calc(100 * var(--expand));
}

/* =========================
   Shadow
========================= */

/*.front-back-animation .animation-wrapper::after {
	content: "";
	position: absolute;
	bottom: -40px;
	left: 0;
	width: 100%;
	height: 10px;
	border-radius: 50%;
	background: linear-gradient(to right, #ffffff, #9ca3af, #ffffff);
	filter: blur(24px);
}*/

/* =========================
   Front & Back
========================= */

.front-back-animation .front-side,
.front-back-animation .back-side {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	top:-17%;
}

.front-back-animation .back-side .image {
	backface-visibility: hidden;
}

.front-back-animation .front-side img {
	transform: rotateY(180deg) scale(0.98);
}

/* =========================
   Images
========================= */

.front-back-animation .image {
	position: absolute;
}

.front-back-animation .image img {
	width: auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	object-fit:cover;
	display: block;
	border-radius: 0px;
}

/* =========================
   Front Images
========================= */

.front-back-animation .image-1 {
	top: 17%;
    left: 11%;
    width: 39%;
	transform: translateZ(calc(var(--plane-2) * 1px));
}

.front-back-animation .image-2 {
	top: 21%;
    left: 51%;
    width: 35%;
	transform: translateZ(calc(var(--plane-1) * 1px));
}

.front-back-animation .image-3 {
	top: 56%;
    left: 66%;
    width: 29%;
	transform: translateZ(calc(var(--plane-5) * 1px));
}

.front-back-animation .image-4 {
	top: 64%;
    left: 34%;
    width: 29%;
	transform: translateZ(calc(var(--plane-4) * 1px));
}

.front-back-animation .image-5 {
	top: 46%;
    left: 4%;
    width: 27%;
	transform: translateZ(calc(var(--plane-6) * 1px));
}

/* =========================
   Back Images
========================= */

.front-back-animation .image-6 {
	top: 17%;
    left: 11%;
    width: 39%;
	transform: translateZ(calc((var(--plane-2) + 1) * 1px));
}

.front-back-animation .image-7 {
	top: 21%;
    left: 51%;
    width: 35%;
	transform: translateZ(calc((var(--plane-1) + 1) * 1px));
}

.front-back-animation .image-8 {
	top: 56%;
    left: 66%;
    width: 29%;
	transform: translateZ(calc((var(--plane-5) + 1) * 1px));
}

.front-back-animation .image-9 {
	top: 64%;
    left: 34%;
    width: 29%;
	transform: translateZ(calc((var(--plane-4) + 1) * 1px));
}

.front-back-animation .image-10 {
	top: 46%;
    left: 4%;
    width: 27%;
	transform: translateZ(calc((var(--plane-6) + 1) * 1px));
}
@supports (-webkit-hyphens: none) and (not (hyphens: none)) {
    .front-back-animation .animation-perspective {
        perspective: inherit;
    }
}
@supports (-webkit-touch-callout: none) {
    .front-back-animation .animation-perspective {
        perspective: inherit;
    }
}
@supports (-webkit-touch-callout: none) {
    @media not all and (min-resolution: 0.001dpcm) {
        .front-back-animation .animation-perspective {
            perspective: inherit;
        }
    }
}
@media screen and (max-width:1024px){
.front-back-animation .animation-perspective{perspective:inherit;}
}