main.grid
{
    overflow: hidden;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    row-gap: var(--display-gap);
}

main > *
{
    /* --rows-structure: var(--default-rows-structure); */
    grid-column: pre-first / pos-last;
    grid-row: span 1;
}

/* ==== BANNER HERO ==== */
#Banner
{
    --rows: 2;
    --grid-row-gap: var(--row-gap) * 1.5;
    
    align-content: end;
    background-color: var(--background);
    aspect-ratio: 16/9;
}

#Banner.cover::before
{
    opacity: 1;
    background-image: unset;
}

#Banner.cover.loaded::before
{
    background-image: var(--img);
}

#Banner .content
{
    --rows: 3;
    --inside-horizontal-margin: 0;
    --outside-horizontal-margin: 0;
    --row-height: min-content;
    grid-template-columns: subgrid;
    grid-column: pos-middle 1 / division 4;
    grid-row: pos-row 1 / pre-last;
}

#Banner .content header
{
    grid-column: pos-middle 1 / pre-middle 4;
    grid-row: pos-first / pre-row 1;
}

#Banner .content section
{
    grid-column: pos-middle 1 / division 3;
    grid-row: pos-row 1 / pre-row 2;
}

#Banner .content footer
{
    grid-column: pos-middle 1 / pre-middle 4;
    grid-row: pos-row 2 / pre-last;
}

#Contato > form
{
    display: flex;
    flex-direction: column;
    grid-row: pos-row 2 / pos-last;
    gap: calc(var(--base-size) * 2);
}


@media (max-width: 1280px) {
    
    #Banner
    {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 960px) {
    #Banner
    {
        aspect-ratio: 4 / 3;
    }

    #Banner .content
    {
        grid-column: pos-first / division 4;
    }

    #Banner .content header,
    #Banner .content section,
    #Banner .content footer
    {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    #Banner
    {
        aspect-ratio: 9/16;
    }    

    #Banner .content
    {
        grid-column: pos-first / pre-last;
    }
}