.logo-marquee {
  --marquee-gap: 24px;
  position: relative;
  overflow: hidden;
  padding: 12px 2px 24px;
  direction: ltr;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.logo-marquee + .mt-16 { margin-top: 42px; }

.logo-marquee-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  gap: 0;
  animation: ghayah-marquee 36s linear infinite;
  will-change: transform;
}

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

.logo-marquee-track > * {
  flex: 0 0 190px;
  width: 190px;
  min-height: 150px;
  margin-inline-end: var(--marquee-gap);
}

.logo-marquee-partners .logo-marquee-track > * {
  flex-basis: 220px;
}

.logo-marquee-partners .logo-marquee-track > * > div {
  width: 100%;
}

@keyframes ghayah-marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 600px) {
  .logo-marquee { --marquee-gap: 14px; }
  .logo-marquee-track { animation-duration: 28s; }
  .logo-marquee-track > * { flex-basis: 160px; width: 160px; min-height: 130px; }
  .logo-marquee-partners .logo-marquee-track > * { flex-basis: 190px; width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    overflow-x: auto;
    mask-image: none;
  }

  .logo-marquee-track {
    animation: none;
    transform: none;
    will-change: auto;
  }
}