.content_container {
        max-width: unset !important;
        padding: 0 !important;
        margin: 0 !important
    }

    main:has(#messages) {
        display: none;
    }

    .hero {
        padding: calc(var(--pad-4) * 4) calc(var(--pad-4) * 12);
        justify-content: flex-start;
        border: none !important;
        box-shadow: none !important;
        background: var(--color-primary);
        color: var(--color-text-primary);

        &.bg_inherit {
            background: inherit;
            color: inherit;
        }

        &.bg_raised {
            background: var(--color-raised);
            color: var(--color-text);
        }

        &.bg_lowered {
            background: var(--color-lowered);
            color: var(--color-text);
        }

        &.center {
            justify-content: center !important;
            align-items: center !important;

            & * {
                text-align: center !important;
            }
        }

        & h1 {
            text-align: left;
        }

        & :is(h1, h2, h3, h4, h5, h6) {
            margin: 0 !important;
            max-width: 100dvw;
        }

        @media screen and (max-width: 900px) {
            & {
                padding: calc(var(--pad-4) * 2) var(--pad-4);
                justify-content: center;
                align-items: center;
            }

            & :is(h1, h2, h3, h4, h5, h6) {
                text-align: center;
                transform: scale(0.9);
            }
        }
    }

    .selling_points h4 {
        padding: var(--pad-1) var(--pad-3);
        color: var(--color-text-primary);
        background: var(--color-primary);
        box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
            var(--color-shadow);
    }

    .selling_points * {
        text-align: center;
    }

    .selling_points .point {
        width: 100%;
    }