.marquee {
  overflow: hidden;
  display: flex;
  gap: var(--gap, 3rem);
  align-items: center;
  position: relative;
}

.marquee__content {
  list-style: none;
  display: flex;
  gap: var(--gap, 3rem);
  padding: 1rem 0;
  margin: 0;
  min-width: 100%;
  flex-shrink: 0;
  animation: marquee-scroll var(--duration, 25s) linear infinite;
}

.marquee__content li {
  position: relative;
  font-weight: 600;
  white-space: nowrap;
}

.marquee__content li::before {
  content: "•";
  margin-right: 0.6rem;
}

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