@layer components {
  .marquee {
    overflow: hidden;
    border-block: 1px solid var(--ceniza);
    background-color: var(--carbon-raise)
  }

  .marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 32s linear infinite
  }

  .marquee__set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-block: 0.85rem
  }

  .marquee__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-inline: 1.5rem;
    border-inline-end: 1px solid var(--ceniza);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    color: var(--humo)
  }

  .marquee__item strong {
    color: var(--lava)
  }

  @keyframes marquee-scroll {
    from {
      transform: translateX(0)
    }

    to {
      transform: translateX(-50%)
    }
  }

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