/* Shared mobile rhythm for subpage introductions, loaded after their page skins. */
@media (max-width: 47.99rem) {
    :root {
        --mobile-intro-space: 2rem;
        --mobile-intro-gap: 1.5rem;
    }

    .editorial-hero .editorial-hero__inner,
    .community-hero__inner,
    .partners-hero__inner {
        padding-block: var(--mobile-intro-space) var(--mobile-intro-gap);
    }

    /* Photographs fill the intro behind its content instead of adding a tall
       image-only row. Captions stay in normal flow, including when they wrap. */
    .editorial-hero__art,
    .community-hero__art,
    .partners-hero__art {
        display: flow-root;
        position: static;
        inset: auto;
        width: auto;
        aspect-ratio: auto;
        margin: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
    }

    :is(.editorial-hero__art, .community-hero__art, .partners-hero__art) picture {
        position: absolute;
        z-index: 0;
        inset: 0;
        pointer-events: none;
    }

    :is(.editorial-hero__art, .community-hero__art, .partners-hero__art) img {
        object-position: center;
        transform: none;
    }

    :is(.editorial-hero__art, .community-hero__art, .partners-hero__art)::after {
        z-index: 0;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(7, 21, 34, .96),
            rgba(7, 21, 34, .88) 50%,
            rgba(7, 21, 34, .76)
        );
    }

    .editorial-hero__caption,
    .community-hero__caption,
    .partners-hero__caption {
        position: relative;
        inset: auto;
        width: min(calc(100% - 2rem), var(--container));
        max-width: none;
        margin: 0 auto var(--mobile-intro-space);
    }

    .partners-hero__actions--mobile {
        position: relative;
        z-index: 2;
        margin-block: 0 var(--mobile-intro-gap);
    }

    .community-hero__foot,
    .partners-hero__foot {
        padding-block: 1.25rem;
    }

    /* Other introductions already use backgrounds or content cards. Give them
       the same outer spacing without introducing a fixed height. */
    .pricing-header__inner,
    .contact-editorial__grid,
    .tournaments-page .tournament-hero,
    .launch-hero__inner {
        padding-block: var(--mobile-intro-space);
    }

    .contact-editorial__grid,
    .launch-hero__inner {
        gap: var(--mobile-intro-gap);
    }

    .launch-page,
    .launch-hero,
    .launch-hero__inner {
        min-height: 0;
    }

    .launch-status {
        min-height: 0;
        padding: var(--mobile-intro-gap);
    }
}