$area-max-width: 64rem;

.area {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    padding-top: 0.5rem;

    @media (max-width: $media-sm) {
        // Stacked layout on narrow screens.
        flex-wrap: wrap;
        align-content: flex-start;

        &__sidebar {
            flex: 1 0 auto;
            margin-left: 0.75rem;
            margin-right: 0.75rem;
        }
        &__content {
            padding: 1rem 0.75rem;
            flex: 1 0 auto;
        }
    }

    @media (min-width: $media-sm) {
        &__sidebar {
            flex: 0 0 auto;
        }
        &__content {
            padding: 0 1.5rem;
        }
    }

    &__content {
        flex: 1 1 auto;
        max-width: $area-max-width;
        min-width: 0;
    }
}

.area--vertical {
    display: flex;
    flex: 1 1 auto;
    overflow-y: scroll;
    flex-direction: column;
    width: 100%;

    &__header,
    &__navbar,
    &__content {
        &-inner {
            max-width: $area-max-width;
            margin: 0 auto;
        }
    }

    &__navbar,
    &__content {
        padding: 1rem 0.75rem;
    }
    &__navbar {
        flex: none;
    }
    &__content {
        flex: 1;
        &-inner {
            display: flex;
            flex-direction: column;
            flex: 1;
            height: 100%;
        }
    }
}