/* The Media Query handles performance. Mobile browsers ignore this entire block and will NOT download any of the 12 image assets linked in the HTML above. */
@media (min-width: 992px) {

    /* Wrapper forces the two flex groups to stay tightly pinned side-by-side */
    .marquee-wrapper {
        width: max-content;
    }

    /* Applies the continuous scroll timeline to both blocks simultaneously */
    .marquee-group {
        animation: scrollMarquee 150s infinite linear;
    }

    /* Bootstrap 5 object-fit utility pairs with this to handle your varying image widths */
    .marquee-group img {
        height: 100%;
        width: auto;
    }

    /* JavaScript Toggle Rule: Freezes the moving flex tracks safely */
    .animation-paused .marquee-group {
        animation-play-state: paused !important;
    }

    /* Moves the track left by exactly one full group width. When it hits -100%, Group 2 is perfectly filling the column, allowing a seamless snap-back to 0%. */
    @keyframes scrollMarquee {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
}