.msc-patch-scroller {
    width: 100%;
    overflow: hidden;
    /* mask fades the edges so patches don't hard-cut in/out */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.msc-patch-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation-name: msc-patch-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Pause on hover so people can look at a patch without it sliding away */
.msc-patch-scroller:hover .msc-patch-track {
    animation-play-state: paused;
}

.msc-patch {
    /* ~4 visible at a time on a typical container width;
       adjust this value if your container is much narrower/wider */
    width: 22%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0 1rem;
}

@keyframes msc-patch-scroll {
    from { transform: translateX(0); }
    /* Exactly -50% because the track contains the image set twice —
       scrolling one full set width, then the duplicate picks up
       seamlessly at the same visual position. */
    to   { transform: translateX(-50%); }
}

/* Slightly smaller on narrow screens so 3-4 still fit comfortably */
@media (max-width: 600px) {
    .msc-patch {
        width: 30%;
        margin: 0 0.5rem;
    }
}