:root{
    --marquee-height: 100px;
    --marquee-img-width: 175px;
    
    --marquee-speed: 20s;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100vw);
    }
}
  
.marquee {
    height: var(--marquee-height);
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.marquee::before,
.marquee::after {
    background: linear-gradient(to right, white 0%, transparent 100%);
    content: "";
    height: var(--marquee-height);
    position: absolute;
    width: 5vw;
    z-index: 2;
}
.marquee::before {
    left: 0;
    top: 0;
}
.marquee::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}
.marquee .marquee-track {
    animation: marquee var(--marquee-speed) linear infinite;
    display: flex;
    width: 200vw;
}
.marquee:hover .marquee-track{animation-play-state: paused;}


.marquee .slide{
    height: var(--marquee-height);
    width: 20%;
}

.marquee img{
    height: var(--marquee-height);
    width: var(--marquee-img-width);
    object-fit: contain;
    transition: 0.35s;
    padding: 10px 20px;
}
.marquee img:hover{opacity: 0.65;}