.hero{
    position:relative;
    width:100%;
    height:95vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
}

.hero-bg{

    position:absolute;
    top:0;
    bottom:0;
    left:22px;
    right:22px;

    overflow:hidden;

    border-radius:26px;

    border:2px solid rgba(255,0,140,.7);

    box-shadow:
        0 0 12px rgba(255,0,140,.45),
        0 0 30px rgba(255,0,140,.25);

    z-index:1;

}

.hero-bg img{

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit: contain;
background:linear-gradient(180deg,#14000d,#090909);

transform:scale(1.08);

filter:brightness(.75);

opacity:0;

transition:opacity .8s ease;

}

.hero-bg img.active-bg{

opacity:1;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(to top,rgba(0,0,0,.15),transparent 35%);

    z-index:2;

}

.hero-carousel{

    position:absolute;

    left:50%;
    bottom:40px;

    transform:translateX(-50%);

    width:100%;

    height:320px;

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

    perspective:1400px;

    z-index:20;

}

.hero-card{

    position:absolute;

    width:180px;
    height:270px;

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    transition:
    transform .7s,
    opacity .7s,
    filter .7s;

    box-shadow:
    0 15px 40px rgba(0,0,0,.55);

}

.hero-card img{

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

}

.hero-card.active{

    transform:
    translateX(0)
    scale(1.28);

    z-index:100;

    opacity:1;

    filter:none;

    box-shadow:
    0 0 40px rgba(255,0,120,.6);

}

.hero-card.prev{

    transform:
    translateX(-240px)
    scale(.90)
    rotateY(18deg);

    opacity:.85;

    z-index:80;

}

.hero-card.next{

    transform:
    translateX(240px)
    scale(.90)
    rotateY(-18deg);

    opacity:.85;

    z-index:80;

}

.hero-card.prev2{

    transform:
    translateX(-420px)
    scale(.75)
    rotateY(28deg);

    opacity:.85;

    z-index:60;

}

.hero-card.next2{

    transform:
    translateX(420px)
    scale(.75)
    rotateY(-28deg);

    opacity:.85;

    z-index:60;

}

.hero-card.hidden{

    opacity:0;

    pointer-events:none;

    transform:scale(.4);

}

.hero-card::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:120px;

    background:linear-gradient(transparent,#000);

}

.hero-card::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-65px;

    height:65px;

    transform:scaleY(-1);

    background:inherit;

    opacity:.18;

    filter:blur(6px);

}

@media(max-width:992px){

.hero-card{

width:180px;
height:270px;

}

.hero-card.prev{

transform:translateX(-170px) scale(.82);

}

.hero-card.next{

transform:translateX(170px) scale(.82);

}

.hero-card.prev2,
.hero-card.next2{

display:none;

}

}

/* ==========================================
   HERO - MOBILE ONLY
========================================== */

@media (max-width:768px){

    .hero{

        height:72vh;

    }

    .hero-bg{

        left:12px;
        right:12px;

        border-radius:22px;

    }

    .hero-bg img{

        object-fit:cover;

        transform:scale(1);

        object-position:center top;

    }

    .hero-carousel{

        height:290px;

        bottom:12px;

    }

}