/* ==========================================================================
   PAGEBUILDER: hero
   shared section styles (.pb-section, .pb-content, .pb-headline, .pb-columns) are in style.css.
   ========================================================================== */

/* the bottom padding moves the headline 48px above the vertical center (like on the live site).
   the uneven inline padding is from the live site, too. */
.pb-hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 600px;
    padding: 0 30px 96px 20px;
}

/* full-size background image. */
.pb-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 80%;
}

.pb-hero-headline {
    position: relative;
    margin: 0;
    color: var(--color-white);
    font-size: 50px;
    font-weight: 400;
    line-height: 52px;
    text-align: center;
}

/* desktop: the headline uses the middle half of the width. */
@media (min-width: 960px) {
    .pb-hero {
        padding-inline: calc(25% + 20px) calc(25% + 30px);
    }
}