/* ===================================================
   SUB HERO
=================================================== */

.sub-hero{

    position:relative;

    width:100%;
    height:320px;

    overflow:hidden;

}

.sub-hero__image{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.08);

    animation:subHeroZoom 2.4s ease forwards;

}

.sub-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

}

.sub-hero__inner{

    position:absolute;

    inset:0;

    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.sub-hero__title{

    color:#fff;

    font-size:64px;

    font-weight:700;

    letter-spacing:-2px;

    opacity:0;

    transform:translateY(40px);

    animation:titleFade .8s ease .3s forwards;

}

.sub-hero__breadcrumb{

    margin-top:18px;

    color:rgba(255,255,255,.85);

    font-size:15px;

    opacity:0;

    transform:translateY(20px);

    animation:titleFade .8s ease .6s forwards;

}

@keyframes subHeroZoom{

    to{

        transform:scale(1);

    }

}

@keyframes titleFade{

    to{

        opacity:1;

        transform:none;

    }

}