/* =============================================================================
   GLOBAL
   ============================================================================= */

#lang_banner{
grid-area:lang;
}

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;
}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@media screen and (min-width: 79.5rem){

body{
display:grid;
grid-template-columns:1fr minmax(79.5rem, 100rem) 1fr;
grid-template-rows:repeat(12, auto);
grid-gap:0;
grid-template-areas:
"lang lang lang"
"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 .5rem 0 .5rem;
margin:2rem 2rem 0 2rem;
margin:2rem 0 2rem 0;
}

}

/* Non-standard breakpoints */

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

body{
display:grid;
grid-template-columns:auto;
grid-template-rows:repeat(13, auto);
grid-gap:0;
grid-template-areas:
"lang"
"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 (min-width: 45rem) and (max-width: 79.5rem) — no orientation */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

body{
display:grid;
grid-template-columns:auto;
grid-template-rows:repeat(2, auto) min-content 6rem repeat(8, auto);
grid-gap:0;
grid-template-areas:
"lang"
"start"
"header"
"top"
"teaser"
"main"
"container_1"
"container_2"
"nav_3"
"social"
"footer"
"bottom";
}

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

}