:root {
    --slideX: -116%
}

@media(max-width: 1199.5px) {
    :root {
        --slideX: -160%
    }
}


@media(max-width: 991.5px) {
    :root {
        --slideX: -210%
    }
}

@media(max-width: 767.5px) {
    :root {
        --slideX: -240%
    }
}

@media(max-width: 445px) {
    :root {
        --slideX: -255%
    }
}

@keyframes slider{
    from{
        transform: translateX(0);
    }
    to {
        transform: translateX(var(--slideX));
    }
}

.logos{
    overflow: hidden;
    padding: 60px 0 0;
    background: white;
    white-space: nowrap;
    position: relative;
}

.logos::before,
.logos:after{
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    content: "";
    z-index: 2;
}

.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255,255,255,0), white);
}


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

.slider-logos{
    display: inline-block;
    animation: 7s slider infinite linear;
}

.slider-logos img{    
    height: 6rem;
    margin: 0 2.2rem;
}