:root {
    --hero-banner-foreground-color: rgb(var(--color-lime));
    --hero-banner-branding-width: 345px;
    --hero-banner-branding-height: 117px;
    --hero-banner-height: calc(100vh - var(--header-height));
    --hero-banner-title-font-size: 49px;
    --hero-banner-width: 100%;
    --hero-banner-title-font-weight: 400;
}

.hero-banner__branding {
    mask-image: url('/img/APB_logo.svg');
    mask-size: min(345px, calc(100vw - 6rem)) auto;
    mask-position: bottom 2rem left 3rem;
    mask-repeat: no-repeat;
}

.hero-banner .container-large {
    max-width: 100%;
}

@media (min-width: 768px) {
    :root {
        --hero-banner-title-font-size: calc(80px + min((max(0px, 100vw - 1440px) * 0.075), 25px));
    }

    .hero-banner__branding {
        mask-image: url('/img/APB_logo.svg');
        mask-size: 365px 117px;
    }

    .hero-banner__baseline {
        max-width: 12em;
    }

    .hero-banner__inner {
        padding: 4rem 0 0 0;
    }
}