fix: match mobile Our Work linework

tests/mobile-homepage.spec.js

@@ -457,15 +457,49 @@ test("mobile Our Work contains both reference images", async ({ page }) => {
     const block = await getBox(page.locator(".our-work"));
     const left = await getBox(page.locator(".our-work__media--left"));
     const bottom = await getBox(page.locator(".our-work__media--bottom"));
-    const vector = await getBox(page.locator(".our-work__vector img"));
 
     expectNear(block.height, 888, 12);
     expectNear(left.width, 189, 5);
     expect(bottom.width).toBeGreaterThanOrEqual(335);
     expect(bottom.x).toBeGreaterThanOrEqual(60);
     expect(bottom.x + bottom.width).toBeLessThanOrEqual(402);
-    expectNear(vector.width, 474, 4);
+});
-    expectNear(vector.y - block.y, 160, 3);
+
+test("mobile Our Work uses its dedicated linework composition", async ({
+    page,
+}) => {
+    await page.goto(homepage);
+
+    const block = await getBox(page.locator(".our-work"));
+    const mobileVector = page.locator(".our-work__vector-mobile");
+    const upper = await getBox(
+        mobileVector.locator(".our-work__vector-mobile-upper"),
+    );
+    const lower = await getBox(
+        mobileVector.locator(".our-work__vector-mobile-lower"),
+    );
+
+    await expect(mobileVector).toBeVisible();
+    await expect(page.locator(".our-work__vector-desktop")).toBeHidden();
+    expectNear(upper.x - block.x, 100, 3);
+    expectNear(upper.y - block.y, 240, 3);
+    expectNear(upper.width, 960, 4);
+    expectNear(lower.x - block.x, -430, 3);
+    expectNear(lower.y - block.y, 490, 3);
+    expectNear(lower.width, 960, 4);
+});
+
+test("mobile Our Work linework render remains stable", async ({ page }) => {
+    await page.goto(homepage);
+
+    await expect(page.locator(".our-work")).toHaveScreenshot(
+        "our-work-linework-render.png",
+        {
+            animations: "disabled",
+            maxDiffPixelRatio: 0.025,
+            threshold: 0.08,
+        },
+    );
 });
 
 test("mobile Our Work follows the reference content and overlap order", async ({
@@ -528,12 +562,18 @@ test("Our Work restores its tablet layout at 768px", async ({ page }) => {
 
     const block = page.locator(".our-work");
     const inner = block.locator(".our-work__inner");
-    const vector = block.locator(".our-work__vector img");
+    const vector = block.locator(".our-work__vector-desktop img");
 
     await expect(block).toHaveCSS("min-height", "0px");
     await expect(block).toHaveCSS("padding-top", "64px");
     await expect(inner).toHaveCSS("padding-left", "38.4px");
     await expect(vector).toHaveCSS("width", "768px");
+    await expect(block.locator(".our-work__vector-mobile")).toBeHidden();
+    expect(
+        await vector.evaluate(
+            (image) => /** @type {HTMLImageElement} */ (image).currentSrc,
+        ),
+    ).toContain("our-work-vector.svg");
 });
 
 test("mobile recent posts exposes previous and next controls", async ({

views/blocks/our-work/our-work.css

@@ -35,6 +35,16 @@
     width: 100%;
 }
 
+.our-work__vector-desktop {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.our-work__vector-mobile {
+    display: none;
+}
+
 .our-work__inner {
     display: grid;
     gap: clamp(2rem, 4vw, 4rem) 2.5rem;
@@ -196,13 +206,49 @@
         padding-top: 4.25rem;
     }
 
-    .our-work__vector img {
+    .our-work__vector-desktop {
-        height: 118%;
+        display: none;
+    }
+
+    .our-work__vector-mobile {
+        display: block;
+        inset: 0;
+        position: absolute;
+    }
+
+    .our-work__vector-mobile-clip {
+        clip-path: polygon(
+            74.63% 24.77%,
+            100% 24.77%,
+            100% 56.31%,
+            0 56.31%,
+            0 48.42%,
+            54.73% 48.42%,
+            54.73% 43.92%,
+            67.16% 43.92%,
+            67.16% 38.29%,
+            74.63% 38.29%
+        );
+        inset: 0;
+        position: absolute;
+    }
+
+    .our-work__vector-mobile img {
+        height: auto;
         max-width: none;
-        object-fit: cover;
+        object-fit: fill;
-        object-position: 85% center;
+        position: absolute;
-        transform: translateY(clamp(8rem, 39.8vw, 10rem));
+        width: min(238.806vw, 60rem);
-        width: 118%;
+    }
+
+    .our-work__vector-mobile-upper {
+        left: min(24.876vw, 6.25rem);
+        top: min(59.701vw, 15rem);
+    }
+
+    .our-work__vector-mobile-lower {
+        left: max(-106.965vw, -26.875rem);
+        top: min(121.891vw, 30.625rem);
     }
 
     .our-work__inner {

views/blocks/our-work/our-work.php

@@ -31,12 +31,33 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 
 <section <?php echo wp_kses_post( $wrapper ); ?>>
 	<div class="our-work__vector" aria-hidden="true">
-		<img
+		<div class="our-work__vector-mobile">
-			src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
+			<div class="our-work__vector-mobile-clip">
-			alt=""
+				<img
-			loading="lazy"
+					class="our-work__vector-mobile-upper"
-			role="presentation"
+					src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
-		/>
+					alt=""
+					loading="lazy"
+					role="presentation"
+				/>
+			</div>
+			<img
+				class="our-work__vector-mobile-lower"
+				src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
+				alt=""
+				loading="lazy"
+				role="presentation"
+			/>
+		</div>
+
+		<div class="our-work__vector-desktop">
+			<img
+				src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/our-work/our-work-vector.svg' ); ?>"
+				alt=""
+				loading="lazy"
+				role="presentation"
+			/>
+		</div>
 	</div>
 
 	<div class="our-work__inner container">