.marquee {
  overflow: hidden;
  background: var(--primary);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
  will-change: transform;
}

.marquee-group {
  display: flex;
  flex-shrink: 0;
}

.marquee-group span {
  white-space: nowrap;
  padding: 13px 24px;
  font-size: .82rem;
  font-weight: 800;
}

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

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

@media(max-width:580px) {
  .marquee-group span {
    padding: 11px 16px;
  }
}