fix: match mobile header and hero design

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

@@ -51,28 +51,33 @@
     }
 }
 
+.homepage-hero__location {
+    display: none;
+}
+
 @media (max-width: 767px) {
     .homepage-hero {
-        --hgtHero: 20.75rem;
+        --hgtHero: clamp(37.5rem, 187vw, 47rem);
 
         min-height: var(--hgtHero);
     }
 
     .homepage-hero .content-wrapper {
-        padding-inline: 1rem;
+        padding-inline: clamp(1.25rem, 8vw, 2rem) !important;
     }
 
     .homepage-hero .content-wrapper > div {
-        max-width: 20rem;
-        padding-top: 2.25rem;
+        margin-left: clamp(1.25rem, 8vw, 2rem);
+        max-width: 21.25rem;
+        padding-top: clamp(3rem, 14vw, 3.75rem);
         text-align: left;
     }
 
     .homepage-hero .intro h1 {
-        font-size: clamp(1.8rem, 8vw, 2.2rem);
+        font-size: clamp(1.75rem, 8vw, 2rem);
         letter-spacing: 0;
-        line-height: 0.98;
-        margin-bottom: 0.75rem;
+        line-height: 1.24;
+        margin-bottom: 1.75rem;
     }
 
     .homepage-hero .intro h1 strong {
@@ -84,31 +89,56 @@
         font-size: var(--text-14px);
         line-height: 1.3;
         margin: 0;
-        max-width: 16rem;
+        max-width: 18rem;
     }
 
     .homepage-hero .reset {
-        gap: 0.7rem;
+        flex-wrap: nowrap;
+        gap: clamp(0.75rem, 5.5vw, 1.4rem);
         justify-content: flex-start;
-        margin-top: 1rem;
+        margin-top: 2rem;
     }
 
     .homepage-hero .button {
-        font-size: var(--text-14px);
-        min-height: 2.25rem;
-        min-width: 6.35rem;
-        padding: 0.5rem 0.8rem;
+        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: 0.15rem;
+        bottom: 6.25rem;
         left: 50%;
         transform: translateX(-50%);
-        width: 170%;
+        width: clamp(43rem, 190vw, 48rem);
     }
 
     .homepage-hero .heroMedia img,
     .homepage-hero .heroMedia video {
-        object-position: center top;
+        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;
     }
 }