/* =====  LAYOUT PRIMITIVES  =====
 * Wrapper-Elemente fuer Content: main, article, article header, article section.
 * Inklusive responsive Media-Queries fuer Mobile/Tablet/Desktop. */


main{
grid-area:main;
}

article{
float:left;
width:100%;
margin:0 0 1rem 0;
padding:.75rem 0;
}

article header{
float:left;
width:100%;
margin:0;
padding:0;
background:none;
}

article section{
float:left;
width:100%;
margin:0;
padding:0;
}


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

article header h1{
float:left;
width:100%;
text-align:center;
}

article header h1 .ol{
width:100%;
margin:0 0 .25rem 0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-s);
font-family:var(--primary-font-family);
}

article header h1 .hl{
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-400);
font-size:var(--fs-h1);
font-family:var(--accent-font-family);
}

article header h1 .sl{
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-s);
font-family:var(--primary-font-family);
}

article{
float:left;
width:calc(100% - 1.5rem);
margin:.25rem .75rem;
padding:0;
}

}


/* Tablet and above */
@media screen and (min-width: 45rem){

article header h1{
float:left;
width:100%;
}

article header h1 .ol{
float:left;
width:100%;
margin:0 0 .15rem 0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-m);
font-family:var(--accent-font-family);
}

article header h1 .hl{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-400);
font-size:var(--fs-h1);
font-family:var(--accent-font-family);
}

article header h1 .sl{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-s);
font-family:var(--primary-font-family);
}


}


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

article{
float:left;
width:calc(100% - 1.5rem);
margin:.25rem .75rem;
padding:0;
}

}


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

article{
float:left;
width:calc(100% - 1.5rem);
margin:.25rem .75rem;
padding:0;
}

}


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

article{
float:left;
width:100%;
margin:0;
padding:0;
}
}