/* Countries 2 — same design as .saya-countries (style.css), but the country names
   scroll on their own in an endless loop instead of moving with the page scroll. */
.saya-countries--auto {
  overflow: hidden !important;
}

.saya-countries2__marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

.saya-countries2__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: saya-countries2-loop var(--dur, 30s) linear infinite;
}

.saya-countries2__marquee:hover .saya-countries2__track {
  animation-play-state: paused;
}

/* each copy of the list ends with one gap, so copy 2 starts exactly where copy 1 did */
.saya-countries2__group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 80px;
  padding-right: 80px;
}

@keyframes saya-countries2-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1023px) {
  .saya-countries2__group { gap: 48px; padding-right: 48px; }
}

@media (max-width: 767px) {
  .saya-countries2__group { gap: 32px; padding-right: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .saya-countries2__track { animation-duration: calc(var(--dur, 30s) * 4); }
}