:host {
    display: grid;
    grid:
        "nav nav      .       ." min-content
        ".   title    .       ." min-content
        ".   subtitle .       ." min-content
        ".   content  buttons ." max-content
        ".   .        .       ." 1fr
        / minmax(var(--padding-step), 44fr) minmax(min-content, 62.5rem) min-content 29fr;
}

.title {
    grid-area: title;

    display: block;
    font-size: 2.1875rem;
    margin-top: 5rem;
    padding: var(--container-padding) 0;
}

.subtitle {
    grid-area: subtitle;

    display: block;
    padding: var(--container-padding) 0 calc(4 * var(--container-padding));
    min-height: 2em;
}

content-wrapper {
    grid-area: content;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.container-content {
    display: block;
    flex: 1;
}

.buttons {
    grid-area: buttons;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.navigation {
    grid-area: nav;
    display: flex;
}

.spacer {
    grid-area: spacer;
    max-height: 5em;
    height: 5em;
    min-height: 0;
}

.buttons {
    grid-area: buttons;
}