#site-about-banner {
    padding-top: 170px;
    padding-bottom: 170px;
    position: relative;
    background-size: cover;
    background-position: center;

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 10px;
        background: linear-gradient(to right, var(--site-primary), #FFFF00);
         background: linear-gradient(to right, var(--site-primary), transparent);
    }

    .container {
        position: relative;
        z-index: 1;
    }

    .wrap {
        display: grid;
        gap: 30px;
    }

    h1 {
        font-size: 70px;
        color: #fff;
        font-weight: 700;
        letter-spacing: -1px;
    }   

    .description {
        font-size: 20px;
        max-width: 500px;
    }

     @media (max-width: 980px) {
        padding-top: 80px;
        padding-bottom: 80px;

        h1 {
            font-size: 52px;
        }
    } 

    .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        background: linear-gradient(68deg, rgba(0, 0, 0, 0.95) 50%, transparent 10%);
        background: linear-gradient(90deg, black, transparent);
    }
}