*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* body{

    background:#f5f5f5;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    font-family:Arial;
} */

.carousel-coverflow{

    width:100%;
    max-width:1400px;

    margin:0 auto;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;
}

.carousel-coverflow-track{

    width:100%;
    height:500px;

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    perspective:2600px;

    overflow:hidden;
}

/* ===== Fade nas laterais ===== */

.carousel-coverflow-track::before,
.carousel-coverflow-track::after{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    width:180px;

    z-index:50;

    pointer-events:none;

}

.carousel-coverflow-track::before{

    left:0;

    background:linear-gradient(
        to right,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.95) 20%,
        rgba(255,255,255,.70) 45%,
        rgba(255,255,255,0) 100%
    );

}

.carousel-coverflow-track::after{

    right:0;

    background:linear-gradient(
        to left,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.95) 20%,
        rgba(255,255,255,.70) 45%,
        rgba(255,255,255,0) 100%
    );

}

/* ============================= */

.card-coverflow{

    position:absolute;

    top:50%;
    left:50%;

    width:520px;
    height:340px;

    border-radius:20px;

    overflow:hidden;

    transition:.55s ease;

    cursor:pointer;

    box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.card-coverflow img{

    width:100%;
    height:100%;
    object-fit:cover;
}

.nav-coverflow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:28px;

    cursor:pointer;

    z-index:100;

    box-shadow:0 8px 18px rgba(0,0,0,.15);

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.25s;
}

.nav-coverflow:hover{

    transform:translateY(-50%) scale(1.08);

}

.prev{

    left:10px;
}

.next{

    right:10px;
}

@media (max-width: 768px){

    .carousel-coverflow-track::before,
    .carousel-coverflow-track::after{

        display:none;

    }

}