/* =========================================================
   FULL-WIDTH HERO WITH OVERLAID TEXT
========================================================= */

.bf-hero{
    position:relative;
    width:100%;
    min-height:80vh;
    max-height:820px;
    overflow:hidden;
    background:#0a0a0a;
}

.bf-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.bf-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;

    /* IMPORTANT */
    object-position:center 8%;

    display:block;
    transform:scale(1.04);
    animation:bfHeroZoom 14s var(--bf-ease) forwards;
}

@keyframes bfHeroZoom{
    to{
        transform:scale(1);
    }
}

.bf-hero-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.62) 0%,
            rgba(0,0,0,.34) 42%,
            rgba(0,0,0,.04) 80%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.45) 0%,
            rgba(0,0,0,0) 45%
        );
}

.bf-hero-copy{
    position:relative;
    z-index:3;
    width:100%;
    max-width:1280px;

    min-height:80vh;
    max-height:820px;

    margin:0 auto;
    padding:0 64px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    color:#ffffff;
}