:root{

    --total-brand : 14;
    --logo-width: 12rem;
    --total-logo-width: calc(var(--total-brand)* var(--logo-width)*2);
}



.slider
{
position: relative;
width:100vw;
height: 12rem;
display: flex;
align-items:center;

overflow: hidden;
}


.slider::before,
.slider::after{
    position:absolute;
    content: "";
    height: 100%;

    width: var(--logo-width);
}
.slider::before{
    left: 0;
    background: linear-gradient(to right , #fff 0%,#fff0 100%);

}
.slider::after{
    right: 0;
    background: linear-gradient(to left , #fff 0%,#fff0 100%);

}

.slider ul.brands{
    display: flex;
    list-style: none;
    width: var(--total-logo-width);
    animation: slideLeft 14s linear infinite;
}

@keyframes slideLeft{
    100%{
        transform: translateX(calc(-100%/2));
    }
}

ul.brands li.brand-logo{
    width: var(--logo-width);
    font-size:2rem;
    text-align: center;
    margin-left: 3rem;
}


.center {
    margin: 0 auto;
    padding: 40px 0;
    width: 90%;
}
.center .slick-slide {
    outline: none;
}
.center img {
    margin: 0 auto;
}