diff --git a/src/components/sections/hero/hero.module.css b/src/components/sections/hero/hero.module.css
index 7214b352d..f55b0dfa8 100644
--- a/src/components/sections/hero/hero.module.css
+++ b/src/components/sections/hero/hero.module.css
@@ -2,14 +2,14 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: var(--padding-s);
+  padding: var(--padding-l) 0rem;
 
-  @media (min-width: 640px) {
-    padding: var(--padding-m) 0rem;
+  @media (max-width: 834px) {
+    padding: var(--padding-l) 0rem;
   }
 
-  @media (min-width: 1024px) {
-    padding: var(--padding-l) 0rem;
+  @media (max-width: 425px) {
+    padding: 0rem;
   }
 }
 
@@ -23,14 +23,14 @@
 .secondary {
   composes: shared;
   align-self: center;
-  padding: var(--padding-s) var(--padding-rem);
+  padding: var(--padding-xl) var(--padding-rem);
 
-  @media (min-width: 640px) {
-    padding: var(--padding-m) 0rem;
+  @media (max-width: 834px) {
+    padding: var(--padding-l) var(--padding-s);
   }
 
-  @media (min-width: 1024px) {
-    padding: var(--padding-xl) var(--padding-rem);
+  @media (max-width: 425px) {
+    padding: var(--padding-l) var(--padding-s);
   }
 }