.reference-slider {
  width: 100%;
  overflow: hidden;
}

.reference-slider-track {
  --reference-loop-offset: 8px;
  display: flex;
  width: max-content;
  gap: 16px;
  padding: 0 16px;
  animation: reference-logo-scroll 90s linear infinite;
  will-change: transform;
}

.reference-slider-track > .reference-logo-card {
  display: grid;
  width: 220px;
  height: 144px;
  flex: 0 0 220px;
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d9e5e5;
  border-radius: 7px;
  background: #d8e1e1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.reference-slider .reference-logo-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 16px;
  object-fit: contain !important;
  object-position: center;
}

.reference-slider-track:hover {
  animation-play-state: paused;
}

@keyframes reference-logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% + var(--reference-loop-offset))); }
}

@media (max-width: 640px) {
  .reference-slider-track {
    --reference-loop-offset: 6px;
    gap: 12px;
    padding: 0 12px;
    animation-duration: 70s;
  }

  .reference-slider-track > .reference-logo-card {
    width: 170px;
    height: 124px;
    flex-basis: 170px;
  }

  .reference-slider .reference-logo-image {
    padding: 14px;
  }
}

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