body {
    display: grid;
    grid-template-areas:    "header header header header" 
                            "nav nav nav nav" 
                            "banner banner banner banner" 
                            "services services services services" 
                            "main main aside aside" 
                            "bottom bottom bottom bottom"
                            "footer footer footer footer";
    grid-template-columns: 1fr 780px 300px 1fr;
    grid-template-rows: var(--header-height) 44px auto auto auto auto auto;
}

aside, main {
    margin: 32px 0;
}

footer {
    margin: 8px 0 0;
}

aside {
    margin-left: calc(var(--content-padding) * 2);
}

header {
    grid-area: header;
    grid-column-start: 1;
    grid-column-end: 5;
}

nav {
    grid-area: nav;
    grid-column-start: 1;
    grid-column-end: 5;
}

.banner-main {
    grid-area: banner;
    grid-column-start: 1;
    grid-column-end: 5;
}

.services {
    grid-area: services;
    grid-column-start: 1;
    grid-column-end: 5;
}

main {
    grid-area: main;
    grid-column-start: 2;
    grid-column-end: 3;
    min-height: calc(100vh - 257px);
}

aside {
    grid-area: aside;
    grid-column-start: 3;
    grid-column-end: 4
}


.bottom {
    grid-area: bottom;
    grid-column-start: 1;
    grid-column-end: 5;
}

footer {
    grid-area: footer;
    grid-column-start: 1;
    grid-column-end: 5;
}

/* aside, footer, main {
    padding: var(--content-padding);
} */

/* full content (no aside) */

main.full {
    grid-area: main;
    grid-column-start: 2;
    grid-column-end: 4;
    /* padding-top: calc(100vh - 100px);
    transition: .6s ease-out; */
}

/* .up main.full {
    padding-top: calc(100vh - 180px);
} */

main.full+aside {
    display: none;
}

@media screen and (max-width:1080px) {
    body {
        grid-template-areas: "header" "nav" "banner" "services" "main" "aside" "bottom" "footer";
        grid-template-columns: 100%;
        grid-gap: 0
    }
    /* main {
        width: calc(100vw - (2 * var(--content-padding)));
    } */
    main.full {
        display: grid;
        grid-column-start: 1;
        grid-column-end: 5;
    }
    /* main.full {
        padding-top: 60px;
    } */
    
    /* .up main.full {
        padding-top: 270px;
    } */
    aside, footer, main, header, nav {
        grid-column-start: 1
    }
    aside {
        margin-left: 0;
    }
}