* {
    box-sizing: border-box;
}

.container {
    margin: 0px;
    font-size: 1.1em;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: 15vw 60vw 25vw; /* width of columns*/
    grid-template-rows: auto auto auto; /* width of rows*/
    grid-template-areas:
        "banner banner banner"
        "navigation center right"
        "bottom bottom bottom";
}

header, section, nav, aside, footer {
   border: solid 1px #000;
   padding: 10px;
}

.top-heading {
   grid-area: banner;
}

nav {
    grid-area: navigation;
}

.content {
   grid-area: center;
   min-height: 75vh;
}

aside {
   grid-area: right;
}

footer {
   grid-area: bottom;
}

aside > section {
   margin-bottom: 10px;
   padding: 5px;
}

@media only screen and (max-width: 1200px) {
    .container {
        grid-template-columns: 25vw 75vw; /* width of columns*/
        grid-template-rows: auto auto auto; /* width of rows*/
        grid-template-areas:
            "banner banner"
            "navigation center"
            "bottom bottom";
    }
    aside { 
        display: none;
    }
    nav {
        background-color: #EEE;
    }
}

@media only screen and (max-width: 600px) {
    .container {
        grid-template-columns: 100vw;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
           "banner"
           "navigation"
           "center"
           "bottom";
    }
    nav ul {
        margin: 8px;
        padding: 0px;
    }
    nav li { 
        display: inline-block; 
        margin-right: 10px;
    }
    header, footer {
        background-color: cadetblue;
    }
    h1, h2, h3 {
        font-size: 1.2em;
    }
}