/* 1. Container - Establish Container Query Context */
.my-marquee-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
    container-type: inline-size;
    backface-visibility: hidden;
    transform: translateZ(0);
}
/* Mobile Fix - Force Normal Container Type */
@media (max-width: 767px) {
    .my-marquee-container {
        container-type: normal;
    }
}
/* 2. Track */
.my-marquee-track {
    display: flex;
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
    /* Hardware acceleration */
}

/* 3. Items - The Size Calculation */
.my-marquee-item {
    /* 100cqw / Items Per View */
    width: calc(100cqw / var(--marquee-qty, 5));
    flex: 0 0 calc(100cqw / var(--marquee-qty, 5));
    max-width: calc(100cqw / var(--marquee-qty, 5));

    /* Gap Handling */
    padding-left: calc(var(--marquee-gap, 20px) / 2);
    padding-right: calc(var(--marquee-gap, 20px) / 2);

    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* 4. Images */
.my-marquee-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* 5. Animations */
.my-marquee-normal {
    animation-name: marqueeLeft;
}

@keyframes marqueeLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
    }
}

.my-marquee-reverse {
    animation-name: marqueeRight;
}

@keyframes marqueeRight {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Pause on Hover */
.my-marquee-pause:hover .my-marquee-track {
    animation-play-state: paused;
}