diff --git a/assets/scss/sections/_hero-main.scss b/assets/scss/sections/_hero-main.scss
index 4ac2ee6e..0e8737b7 100644
--- a/assets/scss/sections/_hero-main.scss
+++ b/assets/scss/sections/_hero-main.scss
@@ -1,7 +1,11 @@
 .hero-main {
   position: relative;
   overflow: hidden;
-  background-color: palette(primary-grey, 500);
+  background-color: #0f0f0f;
+
+  @include mq($lg) {
+    padding: 40px 0 200px;
+  }
 
   &::after {
     position: absolute;
@@ -10,12 +14,17 @@
     left: 0;
     width: 100%;
     height: 73px;
-    background: linear-gradient(360deg, palette(primary-grey, 500) 12.12%, rgba(23, 21, 19, 0) 91.41%);
-    z-index: 2;
+    background: linear-gradient(180deg, palette(primary-grey, 500) 12.12%, #181514 91.41%);
+    z-index: 1;
 
     @include mq($md) {
       height: 188px;
     }
+
+    @include mq($lg) {
+      height: 180px;
+      background: linear-gradient(180deg, #0f0f0f 0%, #181514 100%);
+    }
   }
 
   .container {
@@ -30,6 +39,7 @@
 
 .hero-main__description {
  color: palette(primary-dark, 100);
+ max-width: 620px;
 }
 
 .hero-main__content {
@@ -38,11 +48,13 @@
   flex-direction: column;
   gap: 16px;
   position: relative;
-  z-index: 2;
+  z-index: 3;
+  text-align: center;
 
-  @include mq($md) {
+  @include mq($lg) {
+    text-align: left;
     gap: 24px;
-    padding: 72px 0 24px;
+    padding: 0;
   }
 }
 
@@ -57,6 +69,10 @@
     margin-top: 24px;
     gap: 24px;
   }
+
+  @include mq($lg) {
+    justify-content: flex-start;
+  }
 }
 
 .hero-main__media {
@@ -65,34 +81,16 @@
   justify-content: center;
   position: relative;
   z-index: 1;
-
+  opacity: 0.9;
   margin-top: -60px;
   
-  @include mq($md) {
-    margin-top: -200px;
-  }
-
-  &::after,
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 20px;
-    z-index: 1;
-    background-color: palette(primary-grey, 500);
-  }
-
-  &::after {
-    left: 0;
-  }
-
-  &::before {
-    right: 0;
+  @include mq($lg) {
+    margin-top: 0;
+    width: calc((100vw / 12) * 5);
+    max-width: 740px;
   }
 
   video {
-    opacity: 0.9;
     width: 100%;
     max-width: 90rem;
     height: auto;
diff --git a/layouts/index.html b/layouts/index.html
index 6fc35434..b0726465 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,10 +6,10 @@
       </div>
     {{ end }}
     <div class="container">
-      <div class="row justify-center">
-        <div class="col-12 col-md-8">
-          <div class="hero-main__content text-center">
-            <h1 class="hero-main__title text-heading-large js-text-animation">
+      <div class="row justify-center items-center">
+        <div class="col-12 col-md-8 col-lg-7">
+          <div class="hero-main__content">
+            <h1 class="hero-main__title text-heading-medium js-text-animation">
               {{ $title := .Title }}
               {{ with .Params.highlighted }}
                 {{ $highlighted := . }}
@@ -35,7 +35,7 @@ <h1 class="hero-main__title text-heading-large js-text-animation">
             {{end}}
           </div>
         </div>
-        <div class="col-12">
+        <div class="col-12 col-lg-5">
           <div class="hero-main__media">
             <video autoplay muted loop playsinline>
               <source src="{{.Params.hero.video}}" type="video/mp4" />