.client-slider {
  --logo-gap: clamp(28px, 5vw, 72px);

  position: relative;
  contain: layout paint;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
  touch-action: pan-y;
}

.client-slider,
.client-slider * {
  box-sizing: border-box;
}

.client-slider__viewport {
  width: 100%;
  padding-block: clamp(18px, 3vw, 30px);
  overflow: hidden;
}

.client-logo-track {
  --marquee-duration: 18s;
  --loop-offset: -1000px;

  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.client-logo-track.is-running {
  animation: client-logo-marquee var(--marquee-duration) linear infinite;
}

.client-logo-track.is-tab-hidden {
  animation-play-state: paused;
}

.client-slider:hover .client-logo-track,
.client-slider:focus-within .client-logo-track {
  animation-play-state: paused;
}

.client-logo-group {
  display: flex;
  flex-shrink: 0;
  gap: var(--logo-gap);
  align-items: center;
  padding-right: var(--logo-gap);
}

.client-logo-item {
  display: grid;
  flex: 0 0 clamp(150px, 17vw, 220px);
  width: clamp(150px, 17vw, 220px);
  height: clamp(80px, 9vw, 110px);
  padding: clamp(8px, 1.3vw, 14px);
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: translateZ(0);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.client-logo-item:hover {
  box-shadow: none;
  transform: scale(1.05);
}

.client-logo-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 88px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  visibility: visible;
}

.client-logo-fallback {
  color: #334155;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

@keyframes client-logo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--loop-offset), 0, 0);
  }
}

@media (max-width: 992px) {
  .client-slider {
    --logo-gap: clamp(24px, 4vw, 42px);
  }

  .client-logo-item {
    flex-basis: clamp(145px, 23vw, 190px);
    width: clamp(145px, 23vw, 190px);
    height: 92px;
  }

  .client-logo-item img {
    max-width: 175px;
    max-height: 75px;
  }
}

@media (max-width: 768px) {
  .client-slider {
    width: calc(100% + 16px);
    margin-left: -8px;
  }

  .client-slider__viewport {
    padding-block: 18px;
  }

  .client-logo-item {
    flex-basis: clamp(135px, 38vw, 170px);
    width: clamp(135px, 38vw, 170px);
    height: 86px;
    padding: 10px;
  }

  .client-logo-item img {
    max-width: 155px;
    max-height: 68px;
  }
}

@media (max-width: 480px) {
  .client-slider {
    --logo-gap: 22px;

    width: calc(100% + 24px);
    margin-left: -12px;
  }

  .client-slider__viewport {
    padding-block: 15px;
  }

  .client-logo-item {
    flex-basis: 128px;
    width: 128px;
    height: 76px;
    padding: 8px;
  }

  .client-logo-item img {
    max-width: 116px;
    max-height: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-logo-track.is-running {
    animation-duration: 45s;
  }

  .client-logo-item {
    transition: none;
  }
}