@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/contact-display.css);

#Intro
{
    --rows-core: 0px;
    --icon-grow: 8;
    --tag-margin: calc(var(--vertical-margin) * 2);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    align-content: end;
}

#Intro::after
{
    grid-column-end: pre-division 2;
    background-color: var(--shading);
    color: var(--background);
}

#Intro::before
{
    --grow: 8;
    --icon-size: calc(var(--base-size) * var(--grow));
    content: var(--icon-gliph, 'a');
    display: block;
    align-self: flex-end;
    color: var(--background);
    font-family: var(--esl);
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    padding-top: calc(50% - (var(--icon-size) * .5));
    padding-bottom: calc(50% - (var(--icon-size) * .5));
    text-align: center;
    background-color: var(--emphasis-color);
    grid-column: pos-first / pre-division 1;
    grid-row: pos-first / pre-last;
    z-index: 2;
}

#Intro > .title
{
    grid-column: pos-division 1 / division 3;
    grid-row: pos-first / pre-last;
    align-self: end;
}

#Intro.reestruturacao
{
    --icon-gliph: '\2c';
    background-image: url(../../../img/covers/cover-10.jpg);
}

#Intro.contencioso
{
    --icon-gliph: '\e006';
    background-image: url(../../../img/covers/cover-02-b.jpg);
}

#Intro.consultivo
{
    --icon-gliph: '\74';
    background-image: url(../../../img/covers/cover-11.jpg);
}

#Description
{
    --grid-row-gap: var(--display-gap);
}

#Description > .intro,
#Description > .list
{
    grid-column: pos-division 1 / pre-last;
    grid-row: pos-first / pre-row 1;
}

#Description > .list
{
    columns: 2;
    column-gap: var(--default-grid-column-gap);
    grid-row: pos-row 1 / pre-last;
}

@media (max-width: 1024px) {
    #Intro > .title
    {
        grid-column-end: pre-last;
    }
}

@media (max-width: 800px) {
    #Intro
    {
        --grid-row-gap: var(--display-gap);
        --rows-core: var(--default-grid-rows-core);
    }

    #Intro::before
    {
        --grow: 6;
        grid-row: pos-first / pre-row 1;
    }

    #Intro > .title
    {
        grid-column: pos-first / pre-last;
        grid-row: pos-row 1 / pre-last;
    }

    #Description > .intro,
    #Description > .list
    {
        grid-column: pos-first / pre-last;
    }
}

@media (max-width: 640px) {

    #Intro::after
    {
        grid-column-end: pre-last;
    }

    #Intro::before
    {
        --grow: 6;
        grid-column-end: pre-middle 2;
    }

    #Description > .list
    {
        columns: 1;
        column-gap: var(--default-grid-column-gap);
        grid-row: pos-row 1 / pre-last;
    }
}

@media (max-width: 480px) {

    #Intro::before
    {
        grid-column-end: pre-division 2;
    }
}