/* Главная: бегущая строка марок (site/layouts/125-brands.php) */
body.main-page .home-brands {padding: clamp(48px, 5vw, 80px) 0; background: var(--es-darker); overflow: hidden}
body.main-page .home-brands__title {margin: 0 auto 28px; padding: 0 15px; max-width: 1310px; color: rgba(255, 255, 255, .7); font-family: var(--es-font-head); font-size: 16px; font-weight: 700}
body.main-page .home-brands__row {display: flex; width: max-content}
body.main-page .home-brands__row + .home-brands__row {margin-top: 6px}
body.main-page .home-brands__track {display: flex; flex-shrink: 0; gap: 0; margin: 0; padding: 0; list-style: none; animation: home-brands-run 60s linear infinite}
body.main-page .home-brands__row--reverse .home-brands__track {animation-direction: reverse; animation-duration: 70s}
body.main-page .home-brands__track li {padding: 0 .45em; color: transparent; font-family: var(--es-font-head); font-size: clamp(44px, 7vw, 110px); font-weight: 800; line-height: 1.05; white-space: nowrap; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .28); transition: color .3s, -webkit-text-stroke-color .3s}
body.main-page .home-brands__track li::after {content: "·"; margin-left: .45em; color: var(--es-primary); -webkit-text-stroke: 0}
body.main-page .home-brands__track li:hover {color: var(--es-primary); -webkit-text-stroke-color: var(--es-primary)}
body.main-page .home-brands:hover .home-brands__track {animation-play-state: paused}
@keyframes home-brands-run {from {transform: translateX(0)} to {transform: translateX(-100%)}}
@media (prefers-reduced-motion: reduce) {
    body.main-page .home-brands__track {animation: none}
    body.main-page .home-brands__row {width: auto; flex-wrap: wrap}
    body.main-page .home-brands__track[aria-hidden="true"] {display: none}
}