Design language tweaks, improvements

src/lib/styles/responsive.css

@@ -1,8 +1,8 @@
 @media (max-width: 1024px) {
   nav,
   .mobile-menu {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: var(--space-container-x-tablet);
+    padding-right: var(--space-container-x-tablet);
   }
 
   .promise-inner,
@@ -11,13 +11,13 @@
   .testimonials-inner,
   .info-inner,
   .form-inner {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: var(--space-container-x-tablet);
+    padding-right: var(--space-container-x-tablet);
   }
 
   footer {
-    padding-left: 30px;
-    padding-right: 30px;
+    padding-left: var(--space-container-x-tablet);
+    padding-right: var(--space-container-x-tablet);
   }
 
   .hero-text h1 {
@@ -483,7 +483,7 @@
 
   .promise-inner {
     flex-direction: column;
-    padding: 0 24px;
+    padding: 0 var(--space-container-x-mobile);
   }
 
   .promise-text {
@@ -494,7 +494,7 @@
     order: 2;
     flex: none;
     width: 100%;
-    max-width: 320px;
+    max-width: 360px;
     margin: 0 auto;
   }
 
@@ -700,7 +700,11 @@
   .testimonials-inner,
   .info-inner,
   .form-inner {
-    padding: 0 24px;
+    padding: 0 var(--space-container-x-mobile);
+  }
+
+  .page-inner {
+    padding: 0 var(--space-container-x-mobile);
   }
 
   .section-heading {
@@ -708,7 +712,7 @@
   }
 
   footer {
-    padding: 40px 24px 24px;
+    padding: 40px var(--space-container-x-mobile) var(--space-container-x-mobile);
   }
 
   .footer-inner {
@@ -820,4 +824,9 @@
   :root {
     --sh-copy-left-pad: clamp(420px, 22vw, 550px);
   }
+
+  .hero-img img {
+    width: 54%;
+    object-position: center 8%;
+  }
 }