refactor: clarify mobile hero geometry

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

@@ -58,19 +58,24 @@
 @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 {
-        padding-inline: clamp(1.25rem, 8vw, 2rem) !important;
-    }
-
     .homepage-hero .content-wrapper > div {
-        margin-left: clamp(1.25rem, 8vw, 2rem);
-        max-width: 21.25rem;
+        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 {
@@ -112,9 +117,9 @@
 
     .homepage-hero .heroVector .vector {
         bottom: 6.25rem;
-        left: max(-8vw, calc(63.8vw - 18.04rem));
+        left: var(--hero-vector-inline-start);
         transform: translateX(-50%);
-        width: calc(100vw + 22.875rem);
+        width: var(--hero-vector-width);
     }
 
     .homepage-hero .heroMedia img,