.marquee-gallery{
    width:100%;
    overflow:hidden;
    position:relative;
}

/* gradient fade edges */
.marquee-gallery::before,
.marquee-gallery::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:5;
    pointer-events:none;
}

.marquee-gallery::before{
    left:0;
    background:linear-gradient(to right,#fff,transparent);
}

.marquee-gallery::after{
    right:0;
    background:linear-gradient(to left,#fff,transparent);
}

.marquee-track{
    display:flex;
    gap:16px;
    animation: marquee linear infinite;
    animation-duration: var(--speed,40s);
}

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

/* item */
.marquee-item{
    flex:0 0 20%;
    position:relative;
}

.marquee-item img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:8px;
    display:block;
}

/* caption */
.marquee-caption{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:8px 10px;
    font-size:14px;
    color:#fff;
    background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
    border-radius:0 0 8px 8px;
}

/* animation */
@keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* responsive */
@media(max-width:992px){
.marquee-item{flex:0 0 33%;}
}

@media(max-width:600px){
.marquee-item{flex:0 0 80%;}
}