* {
    margin: 0;
    padding: 0;
}
body
{
    display: grid;
    grid-template-rows: repeat(2, 80px) 1fr repeat(2, 80px);
    grid-template-areas: 
    "header"
    "menu1"
    "main"
    "menu2"
    "footer";
    color: hsl(20, 10%, 100%);
    min-height: 100vh;
}
section
{
    height: 100%;
    display: grid;
    grid-template-rows: repeat(3, 20px 1fr);
    grid-template-areas: 
    "text1"
    "box1"
    "text2"
    "box2"
    "text3"
    "box3";
    margin: 0 2rem;
}
section>*{
    margin: 0.3rem 0rem;
}
#aa{
    grid-area: text1;
}
#ab{
    grid-area: box1;
}
#ba{
    grid-area: text2;
}
#bb{
    grid-area: box2;
}
#ca{
    grid-area: text3;
}
#cb{
    grid-area: box3;
}
article
{
    text-align: left;
    margin: 2rem 0;
}

header
{
    text-align: center;
    background-color: hsl(20, 50%, 30%);
    grid-area: header;
}

body > div
{
    text-align: center;
    background-color: hsl(20, 30%, 40%);
    grid-area: menu2;
}

aside
{
    background-color: hsl(20, 80%, 50%);
    display: none;
}

nav
{
    text-align: center;
    background-color: hsl(20, 30%, 60%);
    grid-area: menu1;
}

main
{
    text-align: center;
    grid-area: main;
    background-color: hsl(20, 20%, 80%);
}

footer
{
    text-align: center;
    background-color: hsl(20, 50%, 30%);
    grid-area: footer;
}
@media screen and (min-width: 1000px){

    body
    {
        display: grid;
        grid-template-rows: 5rem 2rem 1fr 5rem;
        grid-template-columns: 1fr 5fr 2.5fr;
        grid-template-areas: 
        "header header header"
        "menu1 menu1 menu2"
        "side1 main side2"
        "footer footer footer";
        color: hsl(20, 10%, 100%);
        min-height: 100vh;
    }

    aside#a{
        grid-area: side1;
    }

    aside#b{
        grid-area: side2;
    }

    aside
    {
        background-color: hsl(20, 80%, 50%);
        display: block;
    }

}