.page-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(45px, 90px) 1fr auto;
    gap: 0em 0em;
    grid-auto-flow: row;
    grid-template-areas:
        "header"
        "main-container"
        "footer";
}

.header {
    padding: 0rem 2rem;
    grid-area: header;
}

.main-container {
    display: grid;
    grid-template-columns: minmax(200px, 350px) 1fr;
    grid-template-rows: 1fr;
    gap: 0em 0em;
    grid-auto-flow: row;
    grid-template-areas:
        "sidebar main-content";
    grid-area: content-container;
}

.sidebar {
    grid-area: sidebar;
}

.main-content {
    padding: 2rem;
    grid-area: main-content;
}

.footer {
    grid-area: footer;
}


/**
<div class="page-container">
    <div class="header"></div>
    <div class="main-container">
        <div class="sidebar"></div>
        <div class="main-content"></div>
    </div>
    <div class="footer"></div>
</div>
**/