@layer components {
    .generator-page {
        display: flex;
        flex-direction: column;
        padding-block-end: var(--space-8);
    }

    .generator-page__hero {
        padding-block-start: var(--space-4);
    }

    .generator-page__kicker {
        margin: 0 0 var(--space-2);
        color: var(--color-accent-2-700);
    }

    .generator-page__title {
        margin: 0 0 var(--space-2);
    }

    .generator-page__lede {
        max-inline-size: 34ch;
        margin: 0;
        font-size: var(--text-l);
    }

    .generator-page__challenge {
        margin: var(--space-2) 0 0;

        & a {
            display: inline-flex;
            align-items: center;
            min-block-size: 44px;
        }
    }
}