header {
    height: 70vh;
    max-height: 750px;
    padding: var(--section-padding-standard-h) var(--section-padding-standard-w);
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url(../assets/industries-hero.jpg);
    background-image: linear-gradient(to right,
            rgba(var(--synova-neutral-100), .7) 40%,
            rgba(var(--synova-neutral-100), .0) 60%),
        url(../assets/industries-hero.jpg);
    background-position: 50% 20%;
    background-size: cover;

    .content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        max-width: 1080px;
        justify-content: left;
        align-items: flex-start;

        h1 {
            font-size: 72px;
            font-weight: 400;
            text-transform: uppercase;
            text-align: right;
            color: rgb(var(--synova-blue-800));
        }

        .line {
            border-bottom: 3px solid rgb(var(--synova-green-400));
            width: 100%;
            max-width: 300px;
        }
    }
}

@media (max-width: 720px) {
    header {

        background-image: linear-gradient(to top,
                rgba(var(--synova-neutral-100), .7) 20%,
                rgba(var(--synova-neutral-100), 0) 50%),
            url(../assets/industries-hero.jpg);
        background-position: 10% 100%;

        align-items: flex-end;
    }
}

@media (max-width: 520px) {
    header {
            background-position: 50% 80%;

            .content h1{
                font-size: 48px;
            }
    }
}