.clients-track{margin-inline-start:calc(50% - (var(--clients-count) + .5) * var(--client-w))}.client-item--live{animation-delay:calc(var(--i) * var(--client-step) - var(--client-step) / 2)}.clients-viewport{--client-w:21rem;--clients-count:8;--clients-lead:4;--client-step:6s}.clients-track{margin-inline-start:calc(50% - (var(--clients-lead) + .5) * var(--client-w));animation:clients-marquee calc(var(--clients-count) * var(--client-step)) linear infinite}[dir=rtl] .clients-track{animation-name:clients-marquee-rtl}.client-item{width:var(--client-w);opacity:.5;filter:grayscale(1)}.client-item--live{animation:client-focus calc(var(--clients-count) * var(--client-step)) linear infinite;animation-delay:calc(var(--g) * var(--client-step) - var(--client-step) / 2)}@keyframes clients-marquee{to{transform:translate(calc(var(--clients-count) * var(--client-w) * -1))}}@keyframes clients-marquee-rtl{to{transform:translate(calc(var(--clients-count) * var(--client-w)))}}@keyframes client-focus{0%,12.5%,to{opacity:.5;filter:grayscale(1);transform:scale(1)}10.4%,2.1%{opacity:1;filter:grayscale(0);transform:scale(1.1)}}@media(prefers-reduced-motion:reduce){.client-item--live,.clients-track{animation:none}}