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


.display {
    position: relative;
    width: 100vw;
    height: 14rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #f1f1f1;
   
}

.display::before, display::after{
    
    position: absolute;
    content: "";
    height: 100%;
    width: var(--logo-width);
    
}
.display::before{
    left: 0;
    background: linear-gradient(to right, #f1f1f1 0%, rgba(16, 101, 102, 0));
    z-index: 11;
}

.display::after{
    right: 0;
    background: linear-gradient(to left, #f1f1f1 0%, rgba(16, 101, 102, 0));
    z-index: 11;
}

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

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

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