.image-marquee-wrapper-2661cccf {
    overflow: hidden;
    display: flex;
    width: 100%;
    position: relative;
    --marquee-gap-2661cccf: 20px;
    --marquee-speed-2661cccf: 20s;
}

.image-marquee-track-2661cccf {
    display: flex;
    width: max-content;
    gap: var(--marquee-gap-2661cccf);
    animation: scroll-marquee-2661cccf var(--marquee-speed-2661cccf) linear infinite;
}

.image-marquee-content-2661cccf {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--marquee-gap-2661cccf);
}

.image-marquee-wrapper-2661cccf[data-direction="right"] .image-marquee-track-2661cccf {
    animation-direction: reverse;
}

.image-marquee-wrapper-2661cccf[data-pause="yes"]:hover .image-marquee-track-2661cccf {
    animation-play-state: paused;
}

.image-marquee-item-2661cccf {
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 250px; /* Default width, override by controls */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.image-marquee-item-2661cccf:focus {
    outline: none;
}

.image-marquee-item-2661cccf img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
}

@keyframes scroll-marquee-2661cccf {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translating by half the width since we now duplicated content 4 times to ensure no gap. 
           We actually need to translate by 50% to move exactly 2 copies (out of 4) over.
           By adding a gap correction, we make the loop pixel-perfect. */
        transform: translateX(calc(-50% - (var(--marquee-gap-2661cccf) / 2)));
    }
}