.nba-cytaty {
  --gold: #D4A63E;
  --gold-hover: #F0C75E;
  --dark: #14100c;
  overflow: hidden;
  background-color: var(--gold);
  padding: 12px 30px;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.nba-cytaty *, .nba-cytaty *::before, .nba-cytaty *::after {
  box-sizing: inherit;
}

.nba-cytaty__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 60px;
  animation: nba-cytaty-scroll var(--nba-cytaty-duration, 40s) linear infinite;
}

@media (hover: hover) {
  .nba-cytaty:hover .nba-cytaty__track {
    animation-play-state: paused;
  }
}

@keyframes nba-cytaty-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 30px)); }
}

.nba-cytaty__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--dark);
  font-size: 0.95rem;
  font-weight: 600;
}

.nba-cytaty__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  stroke: var(--dark);
  fill: none;
  stroke-width: 1.8;
}

@media (max-width: 700px) {
  .nba-cytaty {
    padding: 10px 16px;
  }
  .nba-cytaty__track {
    gap: 40px;
  }
  .nba-cytaty__item {
    font-size: 0.85rem;
  }
  .nba-cytaty__icon {
    width: 15px;
    height: 15px;
  }
}

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