.container {
    display: grid;  /* turns the element into a grid container */
    grid-template-columns: 1fr 2fr 1fr;  /* 3 columns: side, middle (2x wider), side */
    grid-template-rows: auto 1fr auto;  /* 3 rows: header, main content, footer */
    gap: 1rem;  /* space between grid cells, both directions */
    min-height: 100vh; /* grid fills the full screen height */
}

.header {
    grid-column: 1 / -1; /* spans from column line 1 to the last line (full width) */
    grid-row: 1; /* sits in row 1 */
}

.sidebar {
    grid-column: 1; /* sits in first column; column 1 */
    grid-row: 2; /* sits in row 2 */
}

.main {
    grid-column: 2;  /* sits in second column; column 2 */
    grid-row: 2;  /* sits in row 2 */
}

.aside {
    grid-column: 3; /* sits in third column; column 3 */
    grid-row: 2; /* sits in row 2 */
}

.footer {
    grid-column: 1 / -1; /* spans full width again, from column line 1 to the last line */
    grid-row: 3; /* sits in row 3 */
}