.marquee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}

.marquee-viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black var(--space-8), black calc(100% - var(--space-8)), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--space-8), black calc(100% - var(--space-8)), transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation-name: marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

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

.marquee-group {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-6);
  padding-right: var(--space-6);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}