:root {
    --page-hero-three-after-padding-top: 10rem;
}
.block-page-hero-three.hero-section {
    --hero-section-height: calc( 80vh - var(--main-nav-bar-height) );
    --hero-content-display: block;
    --hero-content-position-left: unset;
    --hero-content-width: calc( 100% - 2 * var(--col-x-padding));
    --hero-content-padding: var(--spacing-16) var(--spacing-16) var(--spacing-40);
    --hero-content-translate-y: 50%;
}
.block-page-hero-three.hero-section + * {
    padding-top: var(--page-hero-three-after-padding-top);
}
@media screen and (min-width: 1200px) {
    .block-page-hero-three.hero-section {
        --hero-section-height: 40vh;
        --hero-content-width: 50%;
        --hero-content-padding: var(--spacing-24) var(--spacing-32) var(--spacing-36);
        --hero-content-translate-x: calc( -1 * var(--spacing-30) );
    }
}