@import url(../main.css);
@import url(../base-style.css);
@import url(../components/buttons.css);
@import url(../components/covers.css);
@import url(../components/validation-controls.css);
@import url(../structures/services-display.css);
@import url(../structures/bio-display.css);
@import url(../structures/contact-display.css);

#Intro
{
    --grid-row-gap: var(--display-gap);
    align-content: end;
    min-height: 100vh;
}

#Intro header,
#Intro .content
{
    grid-column: pos-first / pre-division 2;
    grid-row: pos-first / pre-row 1;
}

#Intro .content
{
    --text-color: var(--emphasis-color);
    grid-row: pos-row 1 / pre-last;
}
/* 
#Paulo.bio > figure
{
    grid-column: division 2 / pos-last;
}

#Paulo.bio > section
{
    grid-column: pos-first / pos-middle 2;
}

#Paulo.bio > figure > figcaption
{
    grid-column: pre-division 2 / pos-middle 3;
} */

@media (max-width: 1024px) {
    #Intro header,
    #Intro .content
    {
        grid-column-end: pre-division 3;
    }
}


@media (max-width: 480px) {
    #Intro header,
    #Intro .content
    {
        grid-column-end: pre-last;
    }
}