#container {
    max-width: 1100px;
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 10rem auto 10rem;
    gap: 1rem;
    grid-template-areas:    "header header header"
                            "sidebar-left main sidebar-right"
                            "footer footer footer";
}

#container > * {
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 1rem;
    color: #fff;
}

header {
    background-color: #eda113;
    grid-area: header;
}

aside {
    background-color: #0ba744;
    grid-area: aside;
}

aside.sidebar-left {
    grid-area: sidebar-left;
}

aside.sidebar-right {
    grid-area: sidebar-right;
}

footer {
    background-color: #c1169f;
    grid-area: footer;
}

main {
    background-color: #00a3ff;
    grid-area: main;
}