fix: scale mobile hero vector responsively

tests/mobile-homepage.spec.js

@@ -62,12 +62,28 @@ test("mobile hero CTAs remain fully visible at 320px", async ({ page }) => {
     await page.setViewportSize({ width: 320, height: 800 });
     await page.goto(homepage);
 
+    const vector = await getBox(
+        page.locator(".homepage-hero .heroVector .vector"),
+    );
     const buttons = page.locator(".homepage-hero .reset .button");
     const firstButton = await getBox(buttons.nth(0));
     const secondButton = await getBox(buttons.nth(1));
 
     expectNear(firstButton.y, secondButton.y, 2);
     expect(secondButton.x + secondButton.width).toBeLessThanOrEqual(320);
+    expect(vector.x + vector.width).toBeGreaterThanOrEqual(316);
+});
+
+test("mobile hero vector covers the 767px composition", async ({ page }) => {
+    await page.setViewportSize({ width: 767, height: 900 });
+    await page.goto(homepage);
+
+    const vector = await getBox(
+        page.locator(".homepage-hero .heroVector .vector"),
+    );
+
+    expect(vector.x).toBeLessThan(0);
+    expect(vector.x + vector.width).toBeGreaterThanOrEqual(760);
 });
 
 test("mobile recent posts exposes previous and next controls", async ({

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

@@ -112,9 +112,9 @@
 
     .homepage-hero .heroVector .vector {
         bottom: 6.25rem;
-        left: -8%;
+        left: max(-8vw, calc(63.8vw - 18.04rem));
         transform: translateX(-50%);
-        width: clamp(43rem, 190vw, 48rem);
+        width: calc(100vw + 22.875rem);
     }
 
     .homepage-hero .heroMedia img,