@layer components {
  .marquee {
    --marquee-gap: var(--space-5);
    --marquee-speed: 90;

    position: relative;
    overflow: hidden;
  }

  .marquee__track {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
    width: max-content;
  }

  .marquee__group {
    display: flex;
    align-items: center;
    gap: var(--marquee-gap);
    animation: marquee linear infinite;
  }

  .marquee__item,
  .marquee__sep {
    white-space: nowrap;
  }

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

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