img {
    max-width: 100%;
    grid-area: banner;
    z-index: 1;
}

h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    text-align: right;
    color: #e6dccd;
    margin-right: 15px;
    margin-top: 20px;
    font-size: 30px;
    z-index: 62;
}

h5 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: right;
    color: #e6dccd;
    margin-right: 35px;
    margin-top: -20px;
    font-size: 18px;
}

li {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    color: #2b2b2b;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    color: #2b2b2b;
    font-weight: 400;
    text-align: left;
}

video {
    max-width: 100%;
}

h3 {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #e6dccd;
    text-align: right;
    margin-right: 10px;
}

h4 {
    font-family: 'Source Sans Pro', sans-serif;
    color: #e6dccd;
    text-align: left;
    font-size: 20px;
}

p {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #2b2b2b;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #2b2b2b;
    display: grid;
    grid-template-columns: 1fr [banner-start] 10fr 200px [banner-end] 1fr;
    grid-template-rows: [banner-start] auto [banner-end] auto auto auto;
    grid-template-areas: '. Header Header .' '. main nav .' '. main sidebar .' '. footer footer .';
    background-color: #e6dccd;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #2b2b2b;
    display: grid;
    grid-template-columns: 1fr [banner-start] 10fr 200px [banner-end] 1fr;
    grid-template-rows: [banner-start] auto [banner-end] auto auto auto;
    grid-template-areas: '. Header Header .' '. main nav .' '. main sidebar .' '. footer footer .';
    background-color: #e6dccd;
}

@media (max-width:767px) {
    body {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 18px;
        color: #2b2b2b;
        display: grid;
        grid-template-columns: [banner-start] 1fr 200px;
        grid-template-rows: [banner-start] auto [banner-end] auto auto auto;
        grid-template-areas: 'Header Header' 'main main' 'nav sidebar' 'footer footer';
        background-color: #e6dccd;
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .nested {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }
}

.nested {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}

@media (max-width:767px) {
    .nested {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
}

.nested p {
    border: 1px solid #ffffff;
}

/* VERTICAL MENU */
nav.vertical {
    position: relative;
    background: #475265;
}

/* ALL UL */
nav.vertical ul {
    list-style: none;
}

/* ALL LI */
nav.vertical li {
    position: relative;
}

/* ALL A */
nav.vertical a {
    display: block;
    color: #eee;
    text-decoration: none;
    padding: 10px 1px;
    transition: 0.2s;
}

/* ALL A HOVER */
nav.vertical li:hover > a {
    background: #778;
}

/* INNER UL HIDE */
nav.vertical ul ul {
    background: rgba(0,0,0,0.1);
    padding-left: 20px;
    transition: max-height 0.2s ease-out;
    max-height: 0;
    overflow: hidden;
}

/* INNER UL SHOW */
nav.vertical li:hover > ul {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

.header-image {
    max-width: 100%;
    grid-area: banner;
}

main {
    grid-area: main;
}

.body-image {
    max-width: 100%;
}

nav {
    grid-area: nav;
    background-color: #475265;
}

.sidebar {
    grid-area: sidebar;
    background-color: #7f8da1;
    padding-left: 12px;
}

footer {
    grid-area: footer;
    background-color: #2b2b2b;
}

header {
    grid-area: banner;

    /* background-color: #475265 */
    z-index: 3;
}

.logo {
    margin-left: 20px;
    margin-bottom: -;
    float: left;
    margin-right: 15px;
}

<nav class="vertical">