/* Hero Content Page block */

.block-hero-content-page {
    --hero-content-page-gap: 20px;
    /* Portrait on mobile, wide once there is room */
    --hero-content-page-ratio: 4 / 5;

    /* Both beat ":root :where(.is-layout-constrained) > *" in style.css */
    margin-bottom: 0 !important;
    margin-top: clamp(140px, 9.1vw + 60px, 240px) !important;
}

.block-hero-content-page__inner {
    display: flex;
    flex-direction: column;
    gap: var(--hero-content-page-gap);
    align-items: center;
}

/* Same size as the Hero Post title, a step down from the theme's h1 */
.block-hero-content-page__title {
    margin: 0;
    text-align: center;
    text-wrap: balance;
    max-width: 60rem;
    font-size: var(--wp--preset--font-size--xx-large);
}

.block-hero-content-page__excerpt {
    margin: 0;
    max-width: var(--wp--style--global--content-size);
    text-align: center;
    text-wrap: balance;
}

/* Rounded on top only — the white content panel carries on from its bottom edge */
.block-hero-content-page__image {
    aspect-ratio: var(--hero-content-page-ratio);
    border-radius: var(--radius-06) var(--radius-06) 0 0;
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
}

.block-hero-content-page__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop */

@media (min-width: 782px) {
    .block-hero-content-page {
        --hero-content-page-ratio: 16 / 9;
    }
}