@layer base {
    main {
        flex: 1 1 auto;
        min-height: 0;
        width: var(--view-max-width);
        margin-top: var(--header-height);
    }

    /* Author `display` would otherwise override the HTML hidden attribute */
    main[hidden] {
        display: none !important;
    }

    section {
        width: var(--content-width);
        max-width: 100vw;
        margin: var(--content-margin);
        margin-bottom: 50px;

        &.full-width {
            width: 100vw;
        }

        h1 {
            color: var(--color-darkblue);
            text-transform: uppercase;
            margin-bottom: var(--space-30);

            &.visually-hidden {
                text-transform: none;
                margin: 0;
            }
        }

        p.subtitle {
            color: var(--color-blue);
            font-size: 1.5rem;
            margin-bottom: 5px;
        }
    }

    .full-width {
        width: 100vw;
        max-width: 100vw;
    }
}