.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 { display: block; height: auto; width: 100%; } .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; } }