:root{
    --marquee-height: 120px;
    --marquee-img-width: 225px;
    
    --marquee-speed: 27s;
    --marquee-img-count: 9;
}

@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;
    filter: grayscale(100%);
}
.marquee img:hover{filter: grayscale(0);}


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

    .marquee {
        overflow: hidden;
    }

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

    @keyframes marquee-mobile {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc((var(--marquee-img-count) * -20%) + (-20px)));
        }
    }
    

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

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

/* Tablet only */
@media (min-width: 600px) and (max-width: 820px) {
    :root {
        --marquee-height: 100px;
        --marquee-img-width: 10%;
    }

}