diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss
index d6c083c09..6883c1e2c 100644
--- a/src/styles/isomer-template/components/homepage/_hero.scss
+++ b/src/styles/isomer-template/components/homepage/_hero.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .border-solid-gray {
   border: 1px solid $border-light;
 }
@@ -10,12 +12,88 @@
   background: rgba(0, 0, 0, 0.25);
 }
 
-.hero-body-padding {
+.with-padding {
   padding: 3rem 1.5rem;
 }
 
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: map.get($breakpoints, "md")) {
   .hero-floating {
     padding: 3rem;
   }
 }
+
+// NOTE: This is to keep the infobox from exceeding
+// the width of the nav-bar.
+// Hence, any changes here or on nav-bar should be
+// duplicated to the other.
+.infobox-floating-container {
+  max-width: $container-max-width;
+  margin: 0 auto;
+}
+
+.hero-background-white {
+  .hero-text-color {
+    color: $content-base;
+  }
+  background-color: $canvas-base;
+}
+
+.hero-background-black {
+  .hero-text-color {
+    color: $content-inverse;
+  }
+  background-color: $canvas-inverse;
+}
+
+.hero-background-gray {
+  .hero-text-color {
+    color: $content-inverse;
+  }
+  background-color: $canvas-translucent-grey;
+}
+
+.hero-floating-sm {
+  width: 33%;
+}
+
+.hero-floating-md {
+  width: 50%;
+}
+
+.hero-alignment-left {
+  align-self: flex-end;
+}
+
+.hero-alignment-right {
+  align-self: flex-start;
+}
+
+@media screen and (min-width: map.get($breakpoints, "xl")) {
+  .hero-side-sm {
+    width: 50%;
+  }
+
+  .side-section-infobox-container {
+    width: 576px;
+  }
+
+  .side-section-container-left {
+    text-align: right;
+    align-self: flex-end;
+  }
+
+  .side-section-container-right {
+    text-align: left;
+    align-self: flex-start;
+  }
+}
+
+@media screen and ((max-width: map.get($breakpoints, "xl") - 1)) {
+  .hero-side-sm {
+    width: 33%;
+  }
+}
+
+.hero-side-md {
+  width: 50%;
+}
diff --git a/src/styles/templates/components/hero.scss b/src/styles/templates/components/hero.scss
deleted file mode 100644
index 8865b6a33..000000000
--- a/src/styles/templates/components/hero.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@use "sass:map";
-
-.min-height-mobile {
-  min-height: 398px;
-}
-
-.gray-overlay {
-  background: rgba(0, 0, 0, 0.25);
-}
-
-.with-padding {
-  padding: 3rem 1.5rem;
-}
-
-@media screen and (min-width: map.get($breakpoints, "md")) {
-  .hero-floating {
-    padding: 3rem;
-  }
-}
-
-// NOTE: This is to keep the infobox from exceeding
-// the width of the nav-bar.
-// Hence, any changes here or on nav-bar should be
-// duplicated to the other.
-.infobox-floating-container {
-  max-width: $container-max-width;
-  margin: 0 auto;
-}
-
-.hero-background-white {
-  .hero-text-color {
-    color: $content-base;
-  }
-  background-color: $canvas-base;
-}
-
-.hero-background-black {
-  .hero-text-color {
-    color: $content-inverse;
-  }
-  background-color: $canvas-inverse;
-}
-
-.hero-background-gray {
-  .hero-text-color {
-    color: $content-inverse;
-  }
-  background-color: $canvas-translucent-grey;
-}
-
-.hero-floating-sm {
-  width: 33%;
-}
-
-.hero-floating-md {
-  width: 50%;
-}
-
-.hero-alignment-left {
-  align-self: flex-end;
-}
-
-.hero-alignment-right {
-  align-self: flex-start;
-}
-
-@media screen and (min-width: map.get($breakpoints, "xl")) {
-  .hero-side-sm {
-    width: 50%;
-  }
-
-  .side-section-infobox-container {
-    width: 576px;
-  }
-
-  .side-section-container-left {
-    text-align: right;
-    align-self: flex-end;
-  }
-
-  .side-section-container-right {
-    text-align: left;
-    align-self: flex-start;
-  }
-}
-
-@media screen and ((max-width: map.get($breakpoints, "xl") - 1)) {
-  .hero-side-sm {
-    width: 33%;
-  }
-}
-
-.hero-side-md {
-  width: 50%;
-}