.main-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
        "main-nav"
        "sub-nav"
        "message-bar"
        "content"
        "footer";
}

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

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

.message-bar {
    grid-area: message-bar;
    padding: 0 var(--gap-size) 0;
}

.content {
    grid-area: content;
    overflow-y: auto;
}

.footer {
    grid-area: footer;
}

.content:not(:has(+ .footer)) {
    padding-bottom: 20px;
}

.three-column-content-layout {
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
        "left-bar center right-bar";
    gap: var(--gap-size);
    padding: 0 var(--gap-size) var(--gap-size);
}

.three-column-left {
    grid-area: left-bar;
    min-width: 180px;
    max-width: 300px;
    width: 100%;
    justify-self: end;
    align-self: start;
}

.three-column-center {
    grid-area: center;
    min-width: 750px;
}

.three-column-right {
    grid-area: right-bar;
    min-width: 180px;
    max-width: 300px;
    width: 100%;
    justify-self: start;
    align-self: start;
}