diff --git a/assets/css/site.css b/assets/css/site.css
index 00ec7c0e..43736bef 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -1065,6 +1065,10 @@ table td {
   max-width: 1280px;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .flex-none {
   flex: none;
 }
@@ -1122,6 +1126,12 @@ table td {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-75 {
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-y-100 {
   --tw-scale-y: 1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1496,10 +1506,6 @@ table td {
   padding-top: 0.25rem;
 }
 
-.pt-16 {
-  padding-top: 4rem;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1508,6 +1514,10 @@ table td {
   padding-bottom: 3rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
 .pt-10 {
   padding-top: 2.5rem;
 }
@@ -3191,10 +3201,6 @@ body {
     padding-right: 3rem;
   }
 
-  .lg\:pb-16 {
-    padding-bottom: 4rem;
-  }
-
   .lg\:pt-12 {
     padding-top: 3rem;
   }
@@ -3207,6 +3213,10 @@ body {
     padding-bottom: 0px;
   }
 
+  .lg\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
   .lg\:text-left {
     text-align: left;
   }
diff --git a/layouts/partials/sections/section-how-it-works.html b/layouts/partials/sections/section-how-it-works.html
index f9da284b..c375ccab 100644
--- a/layouts/partials/sections/section-how-it-works.html
+++ b/layouts/partials/sections/section-how-it-works.html
@@ -4,10 +4,10 @@
             <h2 class="text-2xl lg:text-4xl text-[#222222]">How It Works</h2>
         </header>
         <div>
-            <div class="text-[#222222] md:hidden">
+            <div class="text-[#222222] md:hidden scale-auto max-w-full h-auto">
                 {{- partial "svg/diagram-mobile.svg" . }}
             </div>
-            <div class="text-[#222222] hidden md:block">
+            <div class="text-[#222222] hidden md:block scale-75 max-w-full h-auto">
                 {{- partial "svg/diagram.svg" . }}
             </div>
             <div class="text-center text-[#222222] text-sm lg:text-lg leading-normal pt-12 px-8 lg:px-0">