.logo-marquee{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:20px 0;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 1%,
        #000 99%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 1%,
        #000 99%,
        transparent 100%
    );
}

.logo-track{
    display:flex;
    align-items:center;
    gap:70px;
    margin-top:25px;
    width:max-content;
    animation:scrollLogos 53s linear infinite;
}

.logo-track img{
    height:55px;
    width:auto;
    flex-shrink:0;
    transition:transform .3s ease, opacity .3s ease;
}

.logo-track img:hover{
    transform:scale(1.08);
}

.logo-marquee:hover .logo-track{
    animation-play-state:paused;
}

@keyframes scrollLogos{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@media(max-width:767px){
    .logo-track{
        gap:40px;
        animation-duration:12s;
    }

    .logo-track img{
        height:36px;
    }
}