.marquee-slider-7711 {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.marquee-slider-7711.is-ready {
    opacity: 1;
}

.marquee-slider-7711 * {
    box-sizing: border-box;
}

.marquee-slider-7711__track {
    display: flex;
    flex-shrink: 0;
    width: max-content;
    will-change: transform;
    /* Animation applied via JS */
}

.marquee-slider-7711:hover .marquee-slider-7711__track {
    animation-play-state: paused !important;
}

.marquee-slider-7711__image {
    display: block;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* 
   Pixel-Perfect Animation Logic:
   --marquee-travel-distance is calculated by JS as negative trackWidth (e.g. -1500px).
   
   LEFT:
   From 0 to -1500px.
   Effect: Track moves left. When it hits -1500px, Track 1 is fully gone, 
   Track 2 is now exactly where Track 1 started. Loop resets to 0. Seamless.
   
   RIGHT:
   From -1500px to 0.
   Effect: Track starts shifted left (Track 2 is visible in Track 1's spot).
   Moves right to 0. When it hits 0, Track 1 is back in place. Loop resets to -1500px. Seamless.
*/

@keyframes marquee-7711-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--marquee-travel-distance)); }
}

@keyframes marquee-7711-right {
    0% { transform: translateX(var(--marquee-travel-distance)); }
    100% { transform: translateX(0); }
}

.marquee-slider-7711__empty {
    padding: 20px;
    text-align: center;
    background: #f0f0f1;
    color: #333;
    border: 1px dashed #ccc;
    width: 100%;
}