fix: use new mobile vector for contact block

Render mobile-contact-vector.svg alongside the existing contact linework. CSS hides the desktop SVG and shows the mobile <img> at <=767px so the new 342x187 composition fills the card width. Update the geometry test to assert the new linework ratio (342/187) and the snapshot.

views/blocks/contact-block/contact-block.css

@@ -37,6 +37,10 @@
         width: auto;
     }
 
+    .contact-block__linework--mobile {
+        display: none;
+    }
+
     .contact-block__content {
         padding-inline: 1rem;
     }
@@ -75,7 +79,12 @@
     }
 
     .contact-block .contact-block__linework {
+        display: none;
+    }
+
+    .contact-block .contact-block__linework--mobile {
         bottom: 0.75rem;
+        display: block;
         height: auto;
         max-width: 112%;
         right: -32%;
@@ -141,13 +150,18 @@
     }
 
     .contact-block.home-contact .contact-block__linework {
+        display: none;
+    }
+
+    .contact-block.home-contact .contact-block__linework--mobile {
         bottom: 0;
+        display: block;
         height: auto;
-        left: calc(100% * -113 / 343);
+        left: 0;
         max-width: none;
         overflow: visible;
         right: auto;
-        width: calc(100% * 414 / 343);
+        width: 100%;
         z-index: 2;
     }
 

views/blocks/contact-block/contact-block.php

@@ -31,6 +31,8 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 		<?php endif; ?>
 
         <?php get_template_part( '/views/blocks/contact-block/linework' ); ?>
+
+        <img class="contact-block__linework contact-block__linework--mobile" src="<?php echo esc_url( get_theme_file_uri( '/static/img/mobile-contact-vector.svg' ) ); ?>" alt="" loading="lazy" role="presentation" />
 	</div>
 
 	<div class="contact-block__content container pt-12 pb-16 relative z-10">