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

body{
display:grid;
grid-template-columns:auto;
grid-template-rows:auto auto auto auto auto auto auto auto auto auto auto;
grid-gap:0;
grid-template-areas:
"header"
"top"
"teaser"
"main"
"container_1"
"container_2"
"nav_2"
"nav_3"
"start"
"social"
"footer"
"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:auto min-content 6rem auto auto auto auto auto auto auto;
grid-gap:0;
grid-template-areas:
"start"
"header"
"top"
"teaser"
"main"
"container_1"
"container_2"
"nav_3"
"social"
"footer"
"bottom";
}

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

}


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

body{
display:grid;
grid-template-columns:1fr minmax(79.5rem, 100rem) 1fr;
grid-template-rows:auto auto auto auto auto auto auto auto auto auto auto;
grid-gap:0;
grid-template-areas:
"start start start"
"header header header"
"top top top"
"teaser teaser teaser"
"container_1 container_1 container_1"
". main ."
"container_2 container_2 container_2"
"footer footer footer"
"social social social"
"nav_3 nav_3 nav_3"
"bottom bottom bottom";
}

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

}

header{
grid-area:header;
}

footer{
grid-area:footer;
}

#nav_3{
grid-area:nav_3;
}

article{
text-align:left;
}

article section .foreground .title{
text-align:center;
}