.hero{

    position:relative;

    min-height:760px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background-image:url("../assets/images/hero-background.png");
    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
}

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.90) 32%,
        rgba(255,255,255,.50) 56%,
        rgba(255,255,255,0) 100%
    );
}

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;
    grid-template-columns:52% 48%;

    align-items:center;

    min-height:760px;
}

.hero-content{

    max-width:600px;
}

.eyebrow{

    font-size:12px;
    letter-spacing:2px;
    font-weight:700;

    color:var(--secondary);
}

.hero h1{

    font-size:78px;
    line-height:.92;

    font-weight:800;
    letter-spacing:-3px;

    margin:22px 0;
}

.hero h1 span{

    color:var(--secondary);
}

.hero p{

    font-size:18px;
    line-height:1.75;

    color:var(--gray);

    max-width:470px;
}

.hero-buttons{

    display:flex;
    gap:18px;

    margin-top:34px;
}