fix: match mobile contact card design

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

@@ -2,17 +2,24 @@
 
 .contact-block {
     background-color: var(--color-navy, #0d1f35);
-    border-bottom: 1rem solid var(--color-orange, #F26B53);
+    border-bottom: 1rem solid var(--color-orange, #f26b53);
     overflow: hidden;
     position: relative;
 
-    em { color: var(--color-secondary); font-style: normal; }
+    em {
+        color: var(--color-secondary);
+        font-style: normal;
+    }
 
     .contact-block__media {
         inset-block: 0;
         inset-inline-end: 0;
         mask-image: linear-gradient(to right, transparent 0%, black 30%);
-        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
+        -webkit-mask-image: linear-gradient(
+            to right,
+            transparent 0%,
+            black 30%
+        );
         position: absolute;
     }
 
@@ -30,10 +37,6 @@
         width: auto;
     }
 
-    .contact-block__content {
-
-    }
-
     &.home-contact {
         bottom: -25%;
         left: 50%;
@@ -45,46 +48,62 @@
 
 @media (max-width: 767px) {
     .contact-block {
-        border-bottom-width: 0.75rem;
-        border-radius: 0.75rem 0.75rem 0 0;
+        border-bottom-width: calc(100vw * 16 / 402);
+        border-radius: calc(100vw * 16 / 402) calc(100vw * 16 / 402) 0 0;
+        box-sizing: border-box;
+        padding-inline: 0 !important;
+        padding-top: 0 !important;
     }
 
     .contact-block .contact-block__media {
         inset: 0;
-        mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 100%);
-        -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.45) 100%);
+        mask-image: none;
+        -webkit-mask-image: none;
     }
 
     .contact-block .contact-block__bg-image {
-        object-fit: cover;
+        object-fit: fill;
     }
 
     .contact-block .contact-block__linework {
-        bottom: 0.75rem;
+        bottom: 0;
         height: auto;
-        max-width: 112%;
-        right: -32%;
-        width: 22rem;
+        left: calc(100% * -113 / 343);
+        max-width: none;
+        overflow: visible;
+        right: auto;
+        width: calc(100% * 414 / 343);
     }
 
-    .contact-block .contact-block__content {
-        min-height: 18.5rem;
-        padding: 2.25rem 1.5rem 2.75rem !important;
+    .contact-block.home-contact .contact-block__content {
+        margin: 0 !important;
+        max-width: none !important;
+        padding: calc(100vw * 31 / 402) calc(100vw * 33 / 402) 0 !important;
+        position: relative;
+        left: calc(100vw * 33 / 402 - 1rem);
+        width: 100% !important;
+        z-index: 2;
     }
 
     .contact-block .contact-block__text {
-        font-size: clamp(1.9rem, 8.7vw, 2.45rem);
-        line-height: 1.02;
-        max-width: 16rem !important;
+        font-size: calc(100vw * 28 / 402);
+        line-height: 1.08;
+        margin-bottom: calc(100vw * 37 / 402);
+        max-width: calc(100% * 260 / 343) !important;
+    }
+
+    .contact-block .contact-block__cta {
+        padding-block: calc(100vw * 8.5 / 402);
     }
 
     .contact-block.home-contact {
         bottom: auto;
+        height: calc(100vw * 502 / 402);
         left: 50%;
         margin: 2.5rem auto -3.75rem;
         max-width: none;
         position: relative;
         transform: translateX(-50%);
-        width: min(calc(100vw - 2rem), 22.5rem);
+        width: calc(100vw * 343 / 402);
     }
 }