body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #547980;
    overflow: hidden;
}

.head {
    font-size: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.gallery {
    --s: 150px;
    display: grid;
    transform-style: preserve-3d;
    animation: r 15s linear infinite;
    position: relative;
}

@keyframes r {
    0% {
        transform: perspective(450px) rotateX(-100deg) rotate(0deg);
    }

    to {
        transform: perspective(450px) rotateX(-100deg) rotate(-360deg);
    }
}

.gallery>img {
    grid-area: 1/1;
    width: var(--s);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    transform: rotate(var(--_a)) translateY(120%) rotateX(90deg);
}

.gallery>img:nth-child(1) {
    --_a: 0deg;
}

.gallery>img:nth-child(2) {
    --_a: 60deg;
}

.gallery>img:nth-child(3) {
    --_a: 120deg;
}

.gallery>img:nth-child(4) {
    --_a: 180deg;
}

.gallery>img:nth-child(5) {
    --_a: 240deg;
}

.gallery>img:nth-child(6) {
    --_a: 300deg;
}

.gallery::before {
    content: "";
    position: absolute;
    inset: -100%;
    clip-path: polygon(50% 0, calc(50% + .866*50%) 25%, calc(50% + .866*50%) 75%, 50% 100%, calc(50% - .866*50%) 75%, calc(50% - .866*50%) 25%);
    background: #99B2B7;
    transform: translateZ(calc(var(--s)/2)) rotate(90deg);
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .gallery {
        --s: 120px;
    }

    .head {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .gallery {
        --s: 100px;
    }

    .head {
        font-size: 16px;
    }
}