header,footer,main,nav,aside {
    box-sizing: border-box;
    padding: 5px;
}

body {
     margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas:
        'header header header'
        'nav main aside'
        'footer footer footer';
        grid-template-rows: auto 1fr auto;
        grid-template-columns: auto 1fr auto;
        grid-row-gap: 1px;
        grid-column-gap: 10px;
        height: 100vh;
}
header {
    grid-area: header;
    background-color: #F7B3F9;
}
footer {
    grid-area: footer;
    background-color: #C9F4FF;
}
main {
    grid-area: main;
    overflow-y: scroll;
    background-color: #BAFCDE;
}
nav {
    grid-area: nav;
    background-color: #FDFFCC;
}
aside {
    grid-area: aside;
    background-color: #FFDE99;
}

@media screen and (max-width: 768px) {
    body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas: 'header'
                         'main'
                         'nav'
                         'aside'
                         'footer';
    grid-template-rows:  auto  minmax(400px, 1fr)  auto auto  auto;
    grid-template-columns: 1fr;
    grid-row-gap: 0;



    }
 
}