diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 160b44cf1903aa266dcd77f9859a8737f01a987b..b930ad9c183aebc6b29af9fa5cf8baded69c3a64 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -9,15 +9,18 @@
   @include breakpoint($extrawide) {
     margin-left: 8px;
     margin-right: 8px;
+    margin-top: 8px;
   }
 
   @include breakpoint($xlarge) {
     margin-left: 0;
     margin-right: 0;
+    margin-top: 24px;
   }
 
   &--blue {
-    .hy-hero__content-container {
+    .hy-hero__content-container,
+    .hy-hero__spacer-box {
       background-color: var(--brand-main-light);
     }
 
@@ -62,7 +65,8 @@
   }
 
   &--black {
-    .hy-hero__content-container {
+    .hy-hero__content-container,
+    .hy-hero__spacer-box {
       background-color: var(--grayscale-black);
     }
 
@@ -107,7 +111,8 @@
   }
 
   &--white {
-    .hy-hero__content-container {
+    .hy-hero__content-container,
+    .hy-hero__spacer-box {
       background-color: var(--grayscale-white);
     }
 
@@ -155,6 +160,7 @@
 .hy-hero__container {
   @include breakpoint($wide) {
     display: flex;
+    position: relative;
   }
 }
 
@@ -168,8 +174,12 @@
 
   @include breakpoint($wide) {
     background-color: var(--grayscale-white);
+    bottom: 0;
     order: 2;
     padding: 6px 0;
+    position: absolute;
+    right: 0;
+    top: 0;
     width: 60%;
   }
 }
@@ -190,24 +200,37 @@
   }
 
   @include breakpoint($wide) {
+    background-color: transparent !important;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    order: 1;
-    padding: 52px 0;
+    margin: 0 auto;
+    padding: 52px 2rem;
     position: relative;
-    width: 40%;
+    width: 100%;
   }
 
   @include breakpoint($extrawide) {
+    padding: 80px 24px;
+  }
+
+  @include breakpoint($xlarge) {
+    max-width: 1216px;
     padding: 80px 0;
   }
 }
 
-.hy-hero__content {
+.hy-hero__spacer-box {
+  display: none;
+
   @include breakpoint($wide) {
-    margin-left: 32px;
-    margin-right: -32px;
+    bottom: 0;
+    display: block;
+    left: 0;
+    order: 1;
+    position: absolute;
+    top: 0;
+    width: 40%;
   }
 }
 
@@ -246,12 +269,12 @@
     }
 
     @include breakpoint($wide) {
-      max-width: 120% !important;
+      max-width: 48.75% !important;
     }
 
-    @include breakpoint($extrawide) {
-      max-width: 115% !important;
-    }
+    // @include breakpoint($extrawide) {
+    //   max-width: 115% !important;
+    // }
 
     span {
       padding-top: 16px;
@@ -273,9 +296,11 @@
   }
 
   &--overlay {
+    display: block;
     left: 0;
     position: absolute;
     top: 0;
+    width: 100%;
 
     span {
       display: inline;
@@ -308,7 +333,7 @@
     letter-spacing: -0.1px;
     margin: 0;
     padding: 16px 40px 20px 0;
-    max-width: 100%;
+    max-width: 40.21%;
     position: relative;
   }
 
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index 957f4bb375e8e068c0a63ca8381a8a8168a56fac..d36df7f8abd1b255b35eac6926db3a329a8f2dd1 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -91,6 +91,7 @@ export class HyHero {
             <figure class="hy-hero__image-container" style={aspectRatio}>
               <img alt={this.scLabel} class="hy-image__image" src={this.image} />
             </figure>
+            <div class="hy-hero__spacer-box"></div>
             <div class="hy-hero__content-container">
               <div class={classContentContainer}>
                 <div class="hy-hero__title-container">
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index a850ab006d3b70a358184acb7fcdb65f65afd951..cbfbc3bca263dfb69fc139c16c1086dc05a37d96 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/src/components/hy-main/hy-main.scss
@@ -28,7 +28,6 @@
       }
       @include breakpoint($extrawide) {
         order: 2;
-        width: 80%;
       }
       @include breakpoint($xlarge) {
         padding: 0 2rem;