/* subsequent page style */
/* grid container */
.left-sidebar-grid {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'right-sidebar'
        'footer';
}

/* general column padding */
.left-sidebar-grid > * {
    padding:1rem;
}

/* assign columns to grid areas */
.left-sidebar-grid > .header {
    grid-area:header;
    background:#5d6d7e;
    font-family:Optima;
    color:#c7c4ad;
}
.left-sidebar-grid > .main-content {
    grid-area:main-content;
    background:#fff;
    font-family:Optima;
}
.left-sidebar-grid > .left-sidebar {
    grid-area:left-sidebar;
    background:#ccd1d1;
    font-family:Optima;
}

.left-sidebar-grid > .right-sidebar {
    grid-area:right-sidebar;
    background:#fff;
    font-family:Optima;
}

.left-sidebar-grid > .footer {
    grid-area:footer;
    background:#ccd1d1;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .left-sidebar-grid {
        grid-template-columns:repeat(5, 1fr);
        grid-template-areas:
            'header header header header header'
            'left-sidebar main-content main-content main-content right-sidebar'
            'footer footer footer footer footer';
    }
}