CWC/views/blocks/homepage-hero/homepage-hero.css

.homepage-hero {
    --hgtHero: calc(100vh - (var(--hgtHeader) + 2rem));

    min-height: var(--hgtHero);

    .heroBG /* Rectangle 2 */{
        background: linear-gradient(83.68deg, #032F46 3.13%, #006196 45.91%, #8FC9E6 96.27%);
        mix-blend-mode: normal;
        opacity: 0.5;
    }

    .bgVector /* Rectangle 83 */ {
        background: linear-gradient(73.8deg, #032F46 12.47%, rgba(0, 97, 150, 0.4) 47.08%, rgba(143, 201, 230, 0.1) 73.75%);
        background-blend-mode: multiply;
        height: 100%;
        mix-blend-mode: multiply;
        opacity: 0.7;
        width: 100%;
    }

    .topGradient /* Rectangle 88 */ {
        background: linear-gradient(347.21deg, #032F46 18.31%, rgba(0, 97, 150, 0.4) 56.56%, rgba(143, 201, 230, 0.1) 81.82%);
        background-blend-mode: multiply;
        mix-blend-mode: normal;
    }

    .heroVector {
        background-blend-mode: normal !important;
        height: var(--hgtHero);
        mix-blend-mode: normal !important;
        opacity: 1 !important;
        width: 100%;

        svg {
        }

        .hero-vector--mobile {
            display: none;
        }
    }

    .intro {
        h1 {
            font-size: var(--text-54px);
            font-weight: 400;
            line-height: 1;

            strong {
                font-size: var(--text-54px);
                font-weight: 700;
            }

            em { color: var(--color-cwc-orange-01); }
        }
    }
}

.homepage-hero__location {
    display: none;
}

@media (max-width: 767px) {
    .homepage-hero {
        --hgtHero: clamp(37.5rem, 187vw, 47rem);
        --hero-content-inset: clamp(1.25rem, 8vw, 2rem);
        /* Preserve the 402px crop, then grow the linework to the 767px edge. */
        --hero-vector-inline-start: max(-8vw, calc(63.8vw - 18.04rem));
        --hero-vector-width: calc(100vw + 22.875rem);

        min-height: var(--hgtHero);
    }

    .homepage-hero .content-wrapper > div {
        margin-left: var(--hero-content-inset);
        padding-top: clamp(3rem, 14vw, 3.75rem);
        text-align: left;
        width: min(
            21.25rem,
            calc(
                100vw - var(--hero-content-inset) - var(--hero-content-inset)
            )
        );
    }

    .homepage-hero .intro h1 {
        font-size: clamp(1.75rem, 8vw, 2rem);
        letter-spacing: 0;
        line-height: 1.24;
        margin-bottom: 1.75rem;
    }

    .homepage-hero .intro h1 strong {
        font-size: inherit;
        line-height: inherit;
    }

    .homepage-hero .intro p {
        font-size: var(--text-14px);
        line-height: 1.3;
        margin: 0;
        max-width: 18rem;
    }

    .homepage-hero .reset {
        flex-wrap: nowrap;
        gap: clamp(0.75rem, 5.5vw, 1.4rem);
        justify-content: flex-start;
        margin-top: 2rem;
    }

    .homepage-hero .button {
        font-size: var(--text-18px);
        min-height: 2.75rem;
        min-width: clamp(7.5rem, 36.82vw, 9.25rem);
        padding: 0.65rem 1rem;
    }

    .homepage-hero .reset x-button:nth-child(2) .button {
        min-width: clamp(7.75rem, 38.8vw, 9.75rem);
    }

    .homepage-hero .heroVector .vector {
        bottom: 6.25rem;
        left: var(--hero-vector-inline-start);
        transform: translateX(-50%);
        width: var(--hero-vector-width);
    }

    .homepage-hero .heroVector .vector > svg {
        display: none;
    }

    .homepage-hero .heroVector .hero-vector--mobile {
        bottom: 6.25rem;
        display: block;
        height: auto;
        left: 0;
        position: absolute;
        width: 100vw;
    }

    .homepage-hero .heroMedia img,
    .homepage-hero .heroMedia video {
        object-position: 58% center;
    }

    .homepage-hero .homepage-hero__location {
        align-items: center;
        bottom: 5.5rem;
        color: var(--color-cwc-blue-03);
        display: flex;
        font-size: var(--text-14px);
        gap: 0.5rem;
        left: 2rem;
        position: absolute;
        z-index: 30;
    }

    .homepage-hero .homepage-hero__location svg {
        fill: none;
        height: 1.25rem;
        stroke: currentColor;
        stroke-width: 1.75;
        width: 1.25rem;
    }
}