﻿body {
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .gallery > img {
        height: 180px;
        flex: 1;
        object-fit: cover;
    }

.scene {
    margin: 80px auto;
    width: 210px;
    aspect-ratio: 4/5;
    position: relative;
    perspective: 1000px;
}

.carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate 30s infinite linear;
}

    .carousel > img {
        position: absolute;
        left: 0;
        top: 0;
        width: 190px;
        border-radius: 10px;
        aspect-ratio: 4/5;
        transform: rotateY(var(--i)) translateZ(288px);
    }

@keyframes rotate {
    0% {
        transform: rotateY(360deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}
