/**
 * .ww-hero — the homepage opening statement. Typography lives here
 * rather than as inline font-size declarations on the h1/p so the
 * display size can drop on small screens: 3rem (the `display` token) is
 * roughly 48px, which wraps to four cramped lines on a 375px phone.
 */

.ww-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
    max-width: 48rem;
    margin-inline: auto;
}

.ww-hero__eyebrow {
    align-self: center;
}

.ww-hero__title {
    font-size: var(--wp--preset--font-size--display);
    line-height: 1.1;
    text-wrap: balance;
}

.ww-hero__subtitle {
    font-size: var(--wp--preset--font-size--large);
    color: var(--wp--preset--color--muted);
    text-wrap: pretty;
}

@media (max-width: 768px) {
    .ww-hero__title {
        font-size: var(--wp--preset--font-size--h1);
    }

    .ww-hero__subtitle {
        font-size: var(--wp--preset--font-size--body);
    }
}