fix: align mobile pull quote crop

tests/mobile-homepage.spec.js

@@ -102,23 +102,24 @@ test("mobile pull quote matches the reference scale", async ({ page }) => {
     const text = await getBox(page.locator(".pull-quote__text"));
     const vectorImage = page.locator(".pull-quote__vector img");
     const vector = await getBox(vectorImage);
-    const borderWidth = await page.locator(".pull-quote").evaluate((element) =>
-        Number.parseFloat(getComputedStyle(element).borderBottomWidth),
+    const bandHeight = await page.locator(".pull-quote").evaluate((element) =>
+        Number.parseFloat(getComputedStyle(element, "::after").height),
     );
 
     expectNear(quote.height, 361, 6);
-    expectNear(borderWidth, 16, 1);
+    expectNear(bandHeight, 16, 1);
     expectNear(text.x - quote.x, 32, 3);
     expect(text.width).toBeGreaterThanOrEqual(330);
     expectNear(text.height, 216, 6);
     expectNear(
         text.y + text.height / 2,
-        quote.y + (quote.height - borderWidth) / 2,
+        quote.y + (quote.height - bandHeight) / 2,
         8,
     );
     expectNear(vector.x, quote.x, 3);
     expectNear(vector.width, quote.width, 3);
-    expectNear(vector.height, quote.height - borderWidth, 3);
+    expectNear(vector.height, quote.height - bandHeight, 3);
+    await expect(vectorImage).toHaveCSS("object-position", "0% 50%");
 });
 
 test("mobile pull quote scales proportionally through 767px", async ({
@@ -149,7 +150,7 @@ test("mobile pull quote matches the supplied visual reference", async ({
         "pullquote-reference.png",
         {
             animations: "disabled",
-            maxDiffPixelRatio: 0.094,
+            maxDiffPixelRatio: 0.05,
             threshold: 0.2,
         },
     );

views/blocks/pull-quote/pull-quote.css

@@ -47,27 +47,42 @@
 @media (max-width: 767px) {
     .pull-quote {
         background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
-        border-bottom-width: 1rem;
+        border-bottom: 0;
         height: calc(89.8vw - 1px);
     }
 
+    .pull-quote::after {
+        background: var(--color-cwc-blue-03);
+        bottom: 0;
+        content: "";
+        height: 1rem;
+        left: 0;
+        position: absolute;
+        right: 0;
+        z-index: 2;
+    }
+
+    .pull-quote .pull-quote__vector {
+        bottom: 1rem;
+    }
+
     .pull-quote .pull-quote__vector img {
         height: 100%;
         object-fit: cover;
-        object-position: 30% center;
+        object-position: left center;
         width: 100%;
     }
 
     .pull-quote .pull-quote__content {
         align-items: center;
         display: flex;
-        height: 100%;
+        height: calc(100% - 1rem);
         padding: 2.5rem 2rem;
     }
 
     .pull-quote .pull-quote__text {
         font-size: clamp(1.25rem, 5.535vw, 1.390625rem);
-        line-height: clamp(1.5rem, 6.72vw, 1.6875rem);
+        line-height: clamp(1.5rem, 6.78vw, 1.703125rem);
         width: 100%;
     }
 }