:root{
    --brands-logo-width: 160px;
    --total-brands-logo-width: calc(var(--total-brand) * var(--brands-logo-width) * 2);
    --brands-animation-duration: calc(var(--total-brand) * 2.8s);
}
#clients-carousel{overflow:hidden}
.brands {
    width: var(--total-brands-logo-width);
    display: flex;
    animation: slideLeft var(--brands-animation-duration) linear infinite;
    column-gap: 1rem;
}
.brands:hover{animation-play-state:paused}
@keyframes slideLeft{
    100% {
        transform: translateX(calc(-100% / 2));
    }
}
.client-logo{
    width: var(--brands-logo-width);
    filter: grayscale(1);
    object-fit: contain;
}