html {
    width: 100%; /* 100% width of parent (root) element */
    height: 100vh; /* 100% height of viewport */
    background: #FFF; /* 10% opacity black (very light gray) */
}

body {
    margin: 0; /* content goes to edge of viewport */
    height: 100vh; /* and spans height of viewport */
    color: #414141;
}

.wrapper3, .wrapper3NoTop, .wrapper2Left, .wrapper2LeftNoTop, .wrapper2Right, .wrapper1 {
    min-height: 15rem;
    display: grid;
    width: 100%;
    height: 100%;
}

.wrapper3 {
    grid-template-rows: [top] min-content min-content min-content auto auto min-content [bottom];
    grid-template-areas: "header" "nav" "sidebar" "content" "infobar" "footer";
}

.wrapper3NoTop {
    grid-template-rows: [top] min-content min-content auto auto min-content [bottom];
    grid-template-areas: "header" "sidebar" "content" "infobar" "footer";
}

.wrapper2Left {
    grid-template-rows: [top] min-content min-content min-content auto min-content [bottom];
    grid-template-areas: "header" "nav" "sidebar" "content" "footer";
}

.wrapper2LeftNoTop {
    grid-template-rows: [top] min-content min-content auto min-content [bottom];
    grid-template-areas: "header" "sidebar" "content" "footer";
}

.wrapper2Right {
    grid-template-rows: [top] min-content min-content auto auto min-content [bottom];
    grid-template-areas: "header" "nav" "content" "infobar" "footer";
}

.wrapper1 {
    grid-template-rows: [top] min-content min-content auto min-content [bottom];
    grid-template-areas: "header" "nav" "content" "footer";
}

.main-head {
    grid-area: header;
}

.main-nav {
    grid-area: nav;
}

.sidebar {
    grid-area: sidebar;
    border-bottom: 1px solid #ececec;
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

.main-content {
    grid-area: content;
}

.infobar {
    grid-area: infobar;
    border-top: 1px solid #ececec;
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

.main-footer {
    grid-area: footer;
}


.wrapper3NoTop .main-nav {
    display: none;
}

.wrapper2Left .infobar {
    display: none;
}

.wrapper2LeftNoTop .infobar, .wrapper2LeftNoTop .main-nav {
    display: none;
}

.wrapper2Right .sidebar {
    display: none;
}

.wrapper1 .sidebar, .wrapper1 .infobar {
    display: none;
}

@media (min-width: 768px) {
    .wrapper3 {
        grid-template-rows: [top] min-content min-content auto auto min-content [bottom];
        grid-template-columns: minmax(min-content, 350px) minmax(450px, 900px);
        grid-template-areas:
            "header header"
            "nav nav"
            "sidebar content"
            "sidebar infobar"
            "footer footer";
    }

    .wrapper3NoTop {
        grid-template-rows: [top] min-content auto auto min-content [bottom];
        grid-template-columns: minmax(min-content, 350px) minmax(450px, 900px);
        grid-template-areas:
            "header header"
            "sidebar content"
            "sidebar infobar"
            "footer footer";
    }

    .wrapper2Left {
        grid-template-rows: [top] min-content min-content auto min-content [bottom];
        grid-template-columns: minmax(0px, auto) minmax(300px, 350px) minmax(auto, 1150px) minmax(0px, auto);
        grid-template-areas:
            "header header header header"
            "nav nav nav nav"
            ". sidebar content ."
            "footer footer footer footer";
    }

    .wrapper2LeftNoTop {
        grid-template-rows: [top] min-content auto min-content [bottom];
        grid-template-columns: minmax(0px, auto) minmax(300px, 350px) minmax(auto, 1150px) minmax(0px, auto);
        grid-template-areas:
            "header header header header"
            ". sidebar content ."
            "footer footer footer footer";
    }

    .wrapper2Right {
        grid-template-rows: [top] min-content min-content auto min-content [bottom];
        grid-template-columns: minmax(0px, auto) minmax(auto, 1150px) minmax(300px, 350px) minmax(0px, auto);
        grid-template-areas:
            "header header header header"
            "nav nav nav nav"
            ". content infobar ."
            "footer footer footer footer";
    }

    .wrapper1 {
        grid-template-rows: [top] min-content min-content auto min-content [bottom];
        grid-template-columns: minmax(0px, auto) minmax(auto, 1550px) minmax(0px, auto);
        grid-template-areas:
            "header header header"
            "nav nav nav"
            ". content ."
            "footer footer footer";
    }

    .sidebar {
        padding: 1rem 0.85rem !important;
        border-right: 1px solid #ececec;
        border-bottom: none;
    }

    .wrapper2Right .infobar {
        padding: 1rem 0.85rem !important;
        border-left: 1px solid #ececec;
        border-top: none;
    }
}

@media (min-width: 1200px) {
    .wrapper3 {
        grid-template-rows: [top] min-content min-content auto min-content [bottom];
        grid-template-columns: minmax(0px, auto) minmax(300px, 325px) minmax(600px, 850px) minmax(300px, 325px) minmax(0px, auto);
        grid-template-areas:
            "header header header header header"
            "nav nav nav nav nav"
            ". sidebar content infobar ."
            "footer footer footer footer footer"
    }

    .wrapper3NoTop {
        grid-template-rows: [top] min-content auto min-content [bottom];
        grid-template-columns: minmax(0px, auto) minmax(300px, 325px) minmax(600px, 850px) minmax(300px, 325px) minmax(0px, auto);
        grid-template-areas:
            "header header header header header"
            ". sidebar content infobar ."
            "footer footer footer footer footer"
    }

    .infobar {
        padding: 1rem 0.85rem !important;
        border-left: 1px solid #ececec;
        border-top: none;
    }
}