:root {
    --hero-banner-height: 390px;
    --hero-banner-width: 560px;
    --hero-banner-background-color: rgb(var(--color-dark-green));
    --hero-banner-foreground-color: rgb(var(--color-pharmacy-green));
    --hero-banner-title-font-size: var(--font-size-h2);
    --hero-banner-title-font-weight: 700;
    --hero-banner-caption-font-size: var(--font-size-body);
    --hero-banner-branding-height: 435px;
    --hero-banner-branding-width: 435px;
    --hero-banner-image-height: 260px;
    --hero-banner-branding-offset-y: 320px;
}

.hero-banner-wrapper {
    display: flex;
    justify-content: center;
}

.hero-banner {
    background-color: var(--hero-banner-background-color);
    display: grid;
    width: 100%;
}

    .hero-banner.authenticated {
        max-width: var(--container-large-width);
    }

    .hero-banner > * {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }

.hero-banner__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    min-height: var(--hero-banner-height);
    padding: 3rem 0 calc(var(--hero-banner-branding-height) - var(--hero-banner-branding-offset-y) + 3rem) 0;
    overflow: hidden;
}

.hero-banner__content {
    max-width: var(--hero-banner-width);
}

.hero-banner__baseline {
    margin: 0;
    max-width: 40rem;
    color: var(--hero-banner-foreground-color);
    font-family: var(--font-brand);
    font-weight: var(--hero-banner-title-font-weight);
    font-size: var(--hero-banner-title-font-size);
    line-height: var(--line-height-small);
    word-break: break-word;
}

.hero-banner__caption {
    padding-top: 1.5rem;
    font-size: var(--hero-banner-caption-font-size);
    color: var(--hero-banner-foreground-color);
}

.hero-banner__branding {
    mask-image: url('/img/hero-chevrons.svg');
    mask-size: var(--hero-banner-branding-width) var(--hero-banner-branding-height);
    mask-position: right 4rem bottom calc(-1 * var(--hero-banner-branding-offset-y));
    mask-repeat: no-repeat;
    background-color: var(--hero-banner-foreground-color);
}

.hero-banner:has(.hero-banner__image-wrapper) .hero-banner__inner {
    padding: 3rem 0 calc(var(--hero-banner-image-height) + 5rem) 0;
}

.hero-banner__image-wrapper {
    display: flex;
    align-items: end;
}

.hero-banner__image {
    aspect-ratio: 385/265;
    max-height: var(--hero-banner-image-height);
    max-width: 100%;
    object-fit: cover;
    max-width: 100%;
    height: auto;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    :root {
        --hero-banner-title-font-size: var(--font-size-h1);
        --hero-banner-branding-height: 475px;
        --hero-banner-branding-width: 475px;
        --hero-banner-image-height: 320px;
    }

    .hero-banner__inner {
        flex-direction: row;
        padding: 4rem var(--hero-banner-branding-width) 0 0;
    }

    .sidenav-container__content .hero-banner__inner {
        padding-left: var(--container-padding-x);
    }

    .hero-banner:has(.hero-banner__image-wrapper) .hero-banner__inner {
        padding: 6rem calc(var(--hero-banner-image-height) * 385 / 265 + 2rem)  6rem 0;
    }

    .hero-banner__baseline {
        max-width: 60rem;
    }

    .hero-banner__branding {
        mask-size: var(--hero-banner-branding-width) var(--hero-banner-branding-height);
        mask-position: right var(--container-padding-x) top 3rem;
    }

    .hero-banner__image-wrapper {
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .hero-banner__image {
        margin-bottom: 0;
    }
}