@layer components {
    section#join-purpose {
        width: 100vw;
        max-width: none;
        background-color: var(--color--brand--white);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: var(--space-2xl);
        margin-bottom: 0;
        border-top: solid var(--size--border) var(--color--border);

        * {
            max-width: 900px;
            width: 100%;
        }

        h2 {
            text-align: center;
            border-bottom: solid 4px var(--color--border);
            width: 100%;
            padding-bottom: var(--space-l);
        }

        p.signature {
            font-weight: 500;
            text-align: center;
            font-style: italic;
        }
    }
}