:root{
    --marquee-height: 120px;
    --marquee-img-width: 225px;
    
    --marquee-speed: 20s;
    --marquee-speed-mobile: 10s;
}

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

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


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

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


/* Mobile only */
@media (max-width: 575.98px) {
    :root {
        --marquee-height: 100px;
        --marquee-img-width: 20%;
    }

    .wl-marquee .wl-marquee-track {
        display: inline-block;
        white-space: nowrap;
        animation: marquee var(--marquee-speed-mobile) linear infinite;
        height: var(--marquee-height);
    }

    .wl-marquee .slide {
        display: inline-block;
        width: var(--marquee-img-width);
        height: var(--marquee-height);
        padding: 0 10px; /* Adjust padding as needed */
    }

    .wl-marquee img {
        width: 100%;
        height: var(--marquee-height);
        object-fit: contain;
    }
}