body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow: hidden;
}

.gallery {
    position: relative;
    perspective: 1500px;
    transform-style: preserve-3d;
    width: 200px;
    aspect-ratio: 1;
    background: silver;
    transform: rotate(45deg);
}

.gallery .image {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid white;
    box-sizing: border-box;
    transition: 1s ease;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: calc(var(--total) - var(--i));
}

.gallery .image img {
	--rotate: rotate(-45deg);
    transform: var(--rotate);
	transition: .3s ease;
}

.gallery .image:nth-of-type(odd) {
    --hovermove: -100px, 100px;
    --translate: calc((var(--i) - 1) * -70px), calc((var(--i) - 1) * 70px);
    --tZ: calc((var(--i) - 1) * -350px);
    animation: deploy 1.5s ease forwards;
}

.gallery .image:nth-of-type(even) {
    --hovermove: 100px, -100px;
    --translate: calc(var(--i) * 70px), calc(var(--i) * -70px);
    --tZ: calc(var(--i) * -350px);
    animation: deploy 1.5s ease forwards;
}

.gallery .image:hover img,
.gallery .image.only-hover img {
	transform: var(--rotate) scale(1.1);
}

.gallery .image.only-hover{
    animation: clickAnimation 1s ease;
    z-index: 9;
}

.gallery.hidden-gallery .image {
    animation: close 1.5s ease forwards;
}

@keyframes deploy {
    from {
        transform: translate(0px, 0px) translateZ(0px);
    }
    to {
        transform: translate(var(--translate)) translateZ(var(--tZ));
    }
}

@keyframes close {
    from {
        transform: translate(var(--translate)) translateZ(var(--tZ));
    }
    to {
        transform: translate(0px, 0px) translateZ(0px);
    }
}

@keyframes clickAnimation {
    0% {
        transform: translate(var(--translate)) translateZ(var(--tZ));
    }
    20% {
        transform: translate(var(--hovermove)) translateZ(0px);
    }
    100% {
        transform: translate(calc(var(--i) * 0px), calc(var(--i) * 0px));
    }
}