style.css

* {
    padding: 0;
    margin: 0;
    list-style: none;
}

#main {
    display: grid;
    grid-template-rows: 10vh 15vh auto 15vh;
    grid-template-areas: "header header" "nav nav" "content aside" "footer footer";
}

.header {
    grid-area: header;
    background-color: red;
}

.nav {
    grid-area: nav;
    background-color: blue;
    z-index: 99;
}

.content {
    grid-area: content;
    background-color: yellow;
}

.aside {
    grid-area: aside;
    background-color:orange;
}

.footer {
    grid-area: footer;
    background-color: black;
}

/* reponsive media - breakpoint */
@media screen and (max-width: 768px) {
    #main {
        grid-template-areas: "header" "content" "aside" "footer";
        grid-template-rows: 10vh auto auto 10vh; 
    }

    .nav {
        grid-area: header;
        justify-self: end;
    }    

}