@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/about-display.css);
@import url(../structures/services-display.css);
@import url(../structures/contact-display.css);


#Intro
{
    --row-height: 1fr;
    min-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

#Intro > video
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

#Intro > header
{
    --bg-opacity: .9;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding: var(--vertical-margin) 0;
    padding-left: var(--horizontal-margin);
    background-color: var(--background);
    grid-column: pre-first / division 2;
    grid-row: row 1 / pos-last;
}

#Intro > section
{
    --bg-opacity: .9;
    display: flex;
    align-items: flex-end;
    letter-spacing: -.25px;
    box-sizing: border-box;
    grid-column: division 2 / division 3;
    grid-row: row 1 / pos-last;
    background-color: var(--background);
    padding: var(--vertical-margin) var(--half-gap);
}

@media (max-width: 1024px) {
    #Intro
    {
        --row-height: min-content;
        --rows-core:
            1fr
            [pre-row]
            var(--half-row-gap)
            [row]
            var(--half-row-gap)
            [pos-row]
        ;
    }

    #Intro > section
    {
        grid-column-end: pos-last;
    }
}

@media (max-width: 800px) {

    #Intro
    {
        --row-height: min-content;
        --rows-core:
            1fr
            [pre-row]
            var(--half-row-gap)
            [row]
            var(--half-row-gap)
            [pos-row]
            var(--default-rows-core);
        ;
    }

    #Intro > header,
    #Intro > section
    {
        grid-column: pre-first / division 3;
        padding: var(--vertical-margin) var(--horizontal-margin);
    }

    #Intro > header
    {
        grid-row: row 1 / row 2;
    }

    #Intro > section
    {
        grid-row: row 2 / pos-last;
    }
}

@media (max-width: 640px) {

    #Intro > header,
    #Intro > section
    {
        grid-column: pre-first / pos-last;
        padding: var(--vertical-margin) var(--horizontal-margin);
    }
}