@layer components {
    .gallery-carousel {
        padding: 32px 64px 72px 32px;
        --gallery-height: 295px;
        --gallery-width: 100%;
        --gallery-gap: 40px;
        --gallery-radius: 4px;
        --gallery-duration: 50s;

        width: 100%;
        height: var(--gallery-height);
        overflow: hidden;
        position: relative;

        container-type: size;
        margin-bottom: 15px;
    }
    @media (min-width: 768px) {
        .gallery-carousel {
            --gallery-height: 472px;
            --gallery-gap: 64px;
        }
    }

    @media (min-width: 1920px) {
        .gallery-carousel {
            /*--gallery-width: 1920px;*/
            /*width: var(--gallery-width);*/
            margin: 0 auto;
        }
    }

    .gallery-carousel .gallery-carousel-viewport {
        width: var(--gallery-width);
    }

    .gallery-carousel .gallery-carousel-track {
        display: flex;
        align-items: center;
        gap: var(--gallery-gap);
        width: max-content;
        will-change: transform;
        animation: gallery-carousel-move var(--gallery-duration) linear 1s infinite;
    }

    .gallery-carousel .gallery-carousel-item {
        flex: 0 0 auto;
        overflow: hidden;
        border-radius: var(--gallery-radius);
        height: 100%;
    }

    .gallery-carousel .gallery-carousel-item > img {
        --gallery-ratio: 1;
        display: block;
        object-fit: cover;
        object-position: center;
        height: calc(100cqh * var(--gallery-ratio));
        max-height: var(--gallery-height);
    }

    .gallery-carousel .gallery-carousel-item:nth-child(4n+1) > img {
        --gallery-ratio: 0.6942;
    }

    .gallery-carousel .gallery-carousel-item:nth-child(4n+2) > img {
        --gallery-ratio: 1.0000;
    }

    .gallery-carousel .gallery-carousel-item:nth-child(4n+3) > img {
        --gallery-ratio: 0.6349;
    }

    .gallery-carousel .gallery-carousel-item:nth-child(4n+4) > img {
        --gallery-ratio: 0.8000;
    }

    @keyframes gallery-carousel-move {
        from {
            transform: translateX(0);
        }
        to {
            /* Zakłada, że druga połowa to idealny duplikat pierwszej */
            transform: translateX(calc(-50% - var(--gallery-gap) / 2));
        }
    }
}