/* Mobile View */
@media screen and (max-width: 79.5rem){

body{
display:grid;
grid-template-columns:auto;
grid-template-rows:5rem auto auto auto auto auto auto auto minmax(0,2rem) auto;
grid-gap:0;
grid-template-areas:
"top"
"nav"
"teaser"
"main"
"container_1"
"container_2"
"footer"
"nav_2"
"header"
"bottom";
}

main{
margin:.5rem 0 0 0;
}

}


/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

body{
display:grid;
grid-template-columns:auto;
grid-template-rows:min-content 6rem auto auto auto auto auto auto auto;
grid-gap:0;
grid-template-areas:
"header"
"top"
"nav"
"teaser"
"main"
"container_1"
"container_2"
"footer"
"nav_2"
"bottom";
}

main{
margin:1.5rem 0 0 0;
}

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

body{
display:grid;
grid-template-columns:1fr minmax(auto, 88rem) 1fr;
grid-template-rows:min-content auto auto auto auto auto auto auto auto auto;
grid-gap:0;
grid-template-areas:
"header header header"
"top top top"
"nav nav nav"
"teaser teaser teaser"
". main ."
"container_1 container_1 container_1"
"container_2 container_2 container_2"
"footer footer footer"
"nav_2 nav_2 nav_2"
"bottom bottom bottom";
}

main{
margin:2rem 2rem 0 2rem;
}

}

header{
grid-area:header;
}

footer{
grid-area:footer;
}

#nav{
grid-area:nav;
}

.nav_1{
grid-area:nav_1;
}

.nav_2{
grid-area:nav_2;
}

article{
text-align:left;
}