:root {
    --pm-duration:20s;
    --pm-fade:120px;
    --pm-card-width:280px;
    --pm-gap:20px;
    --pm-scroll-distance:0px;
}

/* Marquee Container */
.pm-marquee{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:20px 0;
    user-select:none;
}

/* Fade Effect */
.pm-marquee::before,
.pm-marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:var(--pm-fade);
    z-index:5;
    pointer-events:none;
}

.pm-marquee::before{
    left:0;
    background:linear-gradient(
        to right,
        white 0%,
        rgba(255,255,255,.9) 35%,
        rgba(255,255,255,.4) 70%,
        transparent
    );
}

.pm-marquee::after{
    right:0;
    background:linear-gradient(
        to left,
        white 0%,
        rgba(255,255,255,.9) 35%,
        rgba(255,255,255,.4) 70%,
        transparent
    );
}

/* Track */
.pm-track{
    display:flex;
    gap:var(--pm-gap);
    width:max-content;

    animation:pm-scroll var(--pm-duration) linear infinite;

    will-change:transform;
    transform:translateX(0);
    backface-visibility:hidden;
}

/* Card */
.pm-card{
    flex:0 0 auto;
    width:var(--pm-card-width);
    border-radius:18px;
    overflow:hidden;
    padding:0;
    box-shadow:none;
    transition:transform .35s ease, box-shadow .35s ease;
}

.pm-card:hover{
    transform:translateY(-10px) scale(1.03);
   box-shadow:none;
}

.pm-card img{
    display:block;
    width:100%;
    height:360px;
    object-fit:cover;
    image-rendering:auto;
    backface-visibility:hidden;
    transition:transform .5s ease, filter .35s ease;
    user-select:none;
    -webkit-user-drag:none;
}

.pm-card:hover img{
    transform:scale(1.08);
    filter:brightness(1.05);
}

/* Animation */
@keyframes pm-scroll{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(var(--pm-scroll-distance));
    }
}

/* Responsive */
@media(max-width:768px){

    :root{
        --pm-card-width:220px;
        --pm-fade:60px;
        --pm-gap:16px;
    }

    .pm-card img{
        height:300px;
    }

}

/* Accessibility */
@media(prefers-reduced-motion:reduce){

    .pm-track{
        animation:none;
    }

    .pm-card,
    .pm-card img{
        transition:none;
    }

}