:root { --marquee-duration: 12s; } /* will be overridden by JS */

    .logo-marquee {
      overflow: hidden;
      position: relative;
      padding: 1rem 0;
      background: #fff;
    }

    /* track holds two groups (original + clone) side-by-side */
    .marquee-track {
      display: flex;
      align-items: center;
      width: max-content; /* width grows to content so translateX(-50%) is meaningful */
      will-change: transform;
      animation: marquee var(--marquee-duration) linear infinite;
    }

    /* group contains the original set of logos */
    .marquee-group {
      display: flex;
      gap: 2rem;
      align-items: center;
      flex-wrap: nowrap;
    }

    .marquee-item {
      flex: 0 0 auto;
      min-width: 120px;
      max-width: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .15rem;
    }

    .marquee-item img {
      max-width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      filter: grayscale(0.02) contrast(1);
    }

    /* animation: slide left by half the total track width (the clone makes total = 2x group width) */
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* pause on hover/focus */
    .logo-marquee:hover .marquee-track,
    .logo-marquee:focus-within .marquee-track {
      animation-play-state: paused;
    }

    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none; }
    }

    /* Optional left/right fade */
    .logo-marquee::before,
    .logo-marquee::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 6%;
      pointer-events: none;
      z-index: 2;
    }
    .logo-marquee::before { left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
    .logo-marquee::after  { right:0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }