styling and responsivness

varianter · Dec 10, 2024 · cef8732 · cef8732
1 parent 7f81382
commit cef8732
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/components/sections/hero/hero.module.css b/src/components/sections/hero/hero.module.css
@@ -2,7 +2,15 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: var(--padding-l) 0rem;
+  padding: var(--padding-s);
+
+  @media (min-width: 640px) {
+    padding: var(--padding-m) 0rem;
+  }
+
+  @media (min-width: 1024px) {
+    padding: var(--padding-l) 0rem;
+  }
 }
 
 .shared {
@@ -15,10 +23,17 @@
 .secondary {
   composes: shared;
   align-self: center;
-  padding: var(--padding-xl) var(--padding-rem);
+  padding: var(--padding-s) var(--padding-rem);
+
+  @media (min-width: 640px) {
+    padding: var(--padding-m) 0rem;
+  }
+
+  @media (min-width: 1024px) {
+    padding: var(--padding-xl) var(--padding-rem);
+  }
 }
 
 .primary {
   composes: shared;
 }
-
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -143,12 +143,12 @@ html {
   --radius-large: 24px;
 
   /* Padding */
-  --padding-xs: 0.25rem; 
+  --padding-xs: 0.25rem;
   --padding-s: 0.75rem;
-  --padding-rem: 1rem; 
+  --padding-rem: 1rem;
   --padding-m: 1.5rem;
   --padding-l: 3rem;
-  --padding-xl: 6rem; 
+  --padding-xl: 6rem;
   --padding-xxl: 9rem;
 
   font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);