.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 {
        }
    }

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

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

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

@media (max-width: 767px) {
    .homepage-hero {
        --hgtHero: 20.75rem;

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

    .homepage-hero .content-wrapper {
        padding-inline: 1rem;
    }

    .homepage-hero .content-wrapper > div {
        max-width: 20rem;
        padding-top: 2.25rem;
        text-align: left;
    }

    .homepage-hero .intro h1 {
        font-size: clamp(1.8rem, 8vw, 2.2rem);
        letter-spacing: 0;
        line-height: 0.98;
        margin-bottom: 0.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: 16rem;
    }

    .homepage-hero .reset {
        gap: 0.7rem;
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .homepage-hero .button {
        font-size: var(--text-14px);
        min-height: 2.25rem;
        min-width: 6.35rem;
        padding: 0.5rem 0.8rem;
    }

    .homepage-hero .heroVector .vector {
        bottom: 0.15rem;
        left: 50%;
        transform: translateX(-50%);
        width: 170%;
    }

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