:root {
    --total-brand: 15;
    --logo-width: 12rem;
    --total-logo-width: calc(var(--total-brand) * var(--logo-width) * 2);
    --animation-duration:calc(var(--total-brand)* 1.7s)
}



section h1 {
    font: 600 1.5rem sans-serif;
    text-transform: uppercase;
}

.slider {
    position: relative;
    width: 100vw;
    background-color: #fff;
    box-shadow: 0 0.2rem 0.2rem -0.2rem #0001;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 30px;
    z-index: 4;
}

.slider::before,
.slider::after {
    position: absolute;
    content: "";
    width: var(--logo-width);
}

/* .slider::before{
    left: 0;
    background: linear-gradient(to right,#fff 0%,#fff0 100%);
    z-index: 1;
}

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


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

/* .slider:hover ul.brands {
    animation-play-state: paused;
} */

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

ul.brands li {
    width: var(--logo-width);
    font-size: 2rem;
    text-align: center;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

li img {
height: 50px;
padding: 0;
margin: 0;

}