/* 1) Define a unique keyframes name */
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* 2) Marquee layout */
.marquee {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    margin: 30px 0;
}

/* The moving track */
.marquee__track {
    display: inline-flex;
    gap: 40px;                  /* use 80px for your bottom row */
    will-change: transform;
}

/* 3) Only animate if the user hasn't asked to reduce motion */
@media (prefers-reduced-motion: no-preference) {
    .marquee__track--animate {
        animation: marquee-scroll 25s linear infinite;
    }
}

/* Optional: a slower/faster variant per row */
.marquee__track--rev {
    animation-direction: reverse;
}