:root{
    --gap: 17px;

    /* Logo size (300x100) */
    --logo-w: 300px;
    --logo-h: 100px;

    /* Slick timing */
    --step-time: 2s;        /* autoplaySpeed */
    --steps: 12;
    --duration: calc(var(--step-time) * var(--steps));

    /* one slide movement */
    --step: calc(var(--logo-w) + var(--gap));
  }

  .customer-logos{
    width: 100%;
    overflow: hidden;
    padding: 10px;
  }

  .logo-track{
    display: flex;
    gap: var(--gap);
    width: max-content;
    align-items: center;
    will-change: transform;
    animation: slickEase var(--duration) infinite;
  }

  .slide{
    flex: 0 0 auto;
    width: var(--logo-w);
    height: var(--logo-h);
    display: grid;
    place-items: center;
  }

  .slide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /*
    Each step:
    - ~80% HOLD
    - ~20% MOVE (eased)
  */
  @keyframes slickEase{

    /* STEP 1 */
    0%{ transform: translateX(0); }
    6.6%{ transform: translateX(0); }
    8.3%{
      transform: translateX(calc(-1 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 2 */
    15%{ transform: translateX(calc(-1 * var(--step))); }
    16.6%{
      transform: translateX(calc(-2 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 3 */
    23.3%{ transform: translateX(calc(-2 * var(--step))); }
    25%{
      transform: translateX(calc(-3 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 4 */
    31.6%{ transform: translateX(calc(-3 * var(--step))); }
    33.3%{
      transform: translateX(calc(-4 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 5 */
    40%{ transform: translateX(calc(-4 * var(--step))); }
    41.6%{
      transform: translateX(calc(-5 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 6 */
    48.3%{ transform: translateX(calc(-5 * var(--step))); }
    50%{
      transform: translateX(calc(-6 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 7 */
    56.6%{ transform: translateX(calc(-6 * var(--step))); }
    58.3%{
      transform: translateX(calc(-7 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 8 */
    65%{ transform: translateX(calc(-7 * var(--step))); }
    66.6%{
      transform: translateX(calc(-8 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 9 */
    73.3%{ transform: translateX(calc(-8 * var(--step))); }
    75%{
      transform: translateX(calc(-9 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 10 */
    81.6%{ transform: translateX(calc(-9 * var(--step))); }
    83.3%{
      transform: translateX(calc(-10 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 11 */
    90%{ transform: translateX(calc(-10 * var(--step))); }
    91.6%{
      transform: translateX(calc(-11 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }

    /* STEP 12 (loop) */
    98.3%{ transform: translateX(calc(-11 * var(--step))); }
    100%{
      transform: translateX(calc(-12 * var(--step)));
      animation-timing-function: cubic-bezier(.4,0,.2,1);
    }
  }

  /* Responsive logo widths */
  @media (max-width: 768px){
    :root{
      --logo-w: 238px;
      --logo-h: calc(var(--logo-w) / 3);
    }
  }
  @media (max-width: 576px){
    :root{
      --logo-w: 196px;
      --logo-h: calc(var(--logo-w) / 3);
    }
}
@media (max-width: 425px){
    :root{
      --logo-w: 119px;
      --logo-h: calc(var(--logo-w) / 3);
    }
}
@media (max-width: 385px){
    :root{
      --logo-w: 174px;
      --logo-h: calc(var(--logo-w) / 3);
    }
}
@media (max-width: 375px){
    :root{
      --logo-w: 170px;
      --logo-h: calc(var(--logo-w) / 3);
    }
}
  @media (max-width: 320px){
    :root{
      --logo-w: 300px;
      --logo-h: calc(var(--logo-w) / 3);
    }
  }

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