.marquee-gallery {

    width: 100%;

    overflow: hidden;

    position: relative;

}



/* gradient edges */

.marquee-gallery::before,

.marquee-gallery::after {

    content: "";

    position: absolute;

    top: 0;

    width: 80px;

    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);

}



/* track */

.marquee-track {

    display: flex;

    gap: 16px;

    width: max-content;

    will-change: transform;

}



/* item */

.marquee-item {

    flex: 0 0 auto;

    width: clamp(160px, 18vw, 240px);

    position: relative;

}



.marquee-item img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 8px;

}



/* caption */

.marquee-caption {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 8px;

    font-size: 13px;

    color: #fff;

    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);

}



/* mobile */

@media(max-width:600px){

    .marquee-item{

        width:140px;

    }

}