.hero {
    position: relative;
    
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    
    overflow: hidden;
}

.hero video {
    position: absolute;
    top: 0;
    left: 0;

    z-index: 0;

    width: 100%;
    height: 100%;
    
    object-fit: cover;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: 1;

    inset: 0;
    pointer-events: none;

    background:
        /* escurece topo (header) */
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.8) 0%,
            rgba(0,0,0,0.6) 18%,
            rgba(0,0,0,0.2) 32%,
            rgba(0,0,0,0) 40%
        ),

        /* escurece lado esquerdo (banner + conteúdo) */
        linear-gradient(
            to right,
            rgba(0,0,0,0.9) 0%,
            rgba(0,0,0,0.8) 20%,
            rgba(0,0,0,0.6) 60%,
            rgba(0,0,0,0.3) 80%,
            rgba(0,0,0,0) 90%
        );
}


.hero .content {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;

    height: 100%;

    color: white;

    user-select: none;
}

.hero .content .banner {
    margin-left: 10%;
}

.hero .content .banner h1 {
    font-family: Montserrat;
    font-size: 48pt;
    font-weight: 800;
}

.hero .content .banner h2 {
    font-size: 18pt;
}

@media (max-width: 1000px) {
    .hero .content .banner h1 {
        font-size: 28pt;
    }

    .hero .content .banner h2 {
        font-size: 10pt;
    }
}