:root { --area-bar-h: 42px; }
.city-banner { display: flex; align-items: center; overflow: hidden; background: #222629; color: #fff; }
.city-banner__track { display: flex; width: max-content; flex: none; animation: city-banner-scroll 34s linear infinite; }
.city-banner__group { display: flex; flex: none; align-items: center; justify-content: space-around; gap: 24px; min-width: 100vw; padding-inline: 24px; white-space: nowrap; font-size: 12px; line-height: 20px; letter-spacing: .035em; }
.city-banner__prefix { font-weight: 400; color: #e0e3e1; }
.city-banner__group strong { font-weight: 650; }
.city-banner__separator { color: #fff; opacity: .55; }
.city-banner:hover .city-banner__track { animation-play-state: paused; }
@keyframes city-banner-scroll { to { transform: translateX(-50%); } }
@media(max-width:680px) { .city-banner__group { gap: 20px; padding-inline: 20px; font-size: 11px; } }
@media(prefers-reduced-motion:reduce) {
 .city-banner { overflow-x: auto; }
 .city-banner__track { animation: none; }
 .city-banner__group + .city-banner__group { display: none; }
}