main.template {
    grid-template-columns: 20fr 60fr 20fr;
    grid-template-areas:
            'header header header'
            'nav article aside'
            'footer footer footer';
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 0;

}

main.template > header.grid {
    grid-area: header;
    background-color: #658DC6;
}

main.template > nav.grid {
    grid-area: nav;
    background-color: #0F4C81;
}

main.template > article.grid {
    grid-row: article;
}

main.template > aside {
    grid-area: aside;
    background-color: #84898C;
}

main.template > footer.grid {
    grid-area: footer;
    background-color: #658DC6;

}

nav.grid > ul {
    padding: 0;
    list-style-type: none;
}

nav.grid li {
    padding: 0 1em;
    background-color: #B5C7D3;
}

nav.grid li:hover {
    background-color: #FFFFFF;
}