.marquee {
  --gap: var(--spacing--md);
  gap: var(--gap);
}

.marquee-content {
  gap: var(--gap);
  animation: scroll linear infinite;
}

/* Constrain logo sizing and apply grayscale */
/* .marquee-content li { */
  /* Set a consistent row height for all logos (adjust as needed) */
  /* --logo-row-height: 64px;
  height: var(--logo-row-height);
} */

/* .marquee-content img {
  /* Keep aspect ratio while fitting within the row height */
  /* max-height: calc(var(--logo-row-height) - 8px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
} */

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    animation-play-state: paused !important;
  }
}