h1{
font-size:1.5em
}
h2{
font-size:1.2em;
}
p {
font-size:0.9em;
}
a {
font-size:1.1em;
}

@media screen and (min-width:80em){
.page-wrapper{
display:grid;
grid-template-columns: 1fr 2fr 2fr;
}
.header {
grid-area: 1 / 1 / 2 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.nav a{
display:block;
border-bottom:1px solid #333;
}
.nav a:hover {
background:red;
}
.nav { 
grid-area: 2 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art1 { 
grid-area: 2 / 2 / 3 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art2 { 
grid-area: 2 / 3 / 3 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art3 { 
grid-area: 3 / 2 / 4 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art4 { 
grid-area: 3 / 3 / 4 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.footer{ 
grid-area: 4 / 1 / 5 / 4;
/* grid-area: row-start / column-start / row-end / column-end; */
}
}

@media screen and (min-width:36em) and (max-width:79.938em){
.page-wrapper{
display:grid;
grid-template-columns: 2fr 2fr;
}
.header {
grid-area: 1 / 1 / 2 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.nav {
grid-area: 2 / 1 / 3 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art1 {
grid-area: 3 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art2 {
grid-area: 3 / 2 / 4 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art3 {
grid-area: 4 / 1 / 5 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art4 {
grid-area: 4 / 2 / 5 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.footer{ 
grid-area: 5 / 1 / 6 / 3;
/* grid-area: row-start / column-start / row-end / column-end; */
}
}

@media screen and (max-width:35.938em){
.page-wrapper{
display:grid;
grid-template-columns: 1fr;
}
.header {
grid-area: 1 / 1 / 2 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
a {
font-size:0.9em;
}
.nav a{
display:inline-block;
border-right:1px solid #333;
float:left;
}
.nav a:hover {
background:red;
}
.nav {
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art1 {
grid-area: 3 / 1 / 4 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art2 {
grid-area: 4 / 1 / 5 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art3 {
grid-area: 5 / 1 / 6 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.art4 {
grid-area: 6 / 1 / 7 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
.footer{
grid-area: 7 / 1 / 8 / 2;
/* grid-area: row-start / column-start / row-end / column-end; */
}
}