body{
    margin: 10px auto;
     max-width: 100%;
     height: auto;
    font-family: Calibri;
    background: #95391C;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:     "head"
                             "nav "
                             "main"
                             "aside"
                             "foot";
}
h1 {
    text-align: center;
    font-size: 25px;
}


header, nav, main, section, aside, footer {
         border: 1px solid;
         padding: 10px;
         margin: 10px;

}

header {
         background: #FFFFFF;
         border-color: #d5d5d5;
         grid-area: head;
}

nav {
         background: #fffbf0;
         border-color: #e7c157;
         grid-area: nav;
}

main {
         background: #FFFFFF;
         border-color: #df6c20;
         grid-area: main;
}

aside {
         background: #fffbf0;
         border-color: #8db243;
         grid-area: aside;
}


footer {
         background: #fffbf0;
         border-color: #8a9da8;
         grid-area: foot;
}

@media (min-width: 40em) {
 body{
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:     "head head"
                                 "nav  aside"
                                 "main main"
                                 "foot foot";
 }
h1 {
text-align: center;
font-size: 40px;
}
}

@media (min-width: 60em) {
 body{
         grid-template-columns: repeat(4, 1fr);
         grid-template-areas:    "head  head head head"
                                 "nav   main main main"
                                 "aside main main main"
                                 "foot  foot foot foot";
 }
h1 {
text-align: center;
font-size: 50px;
}
}