change image size

varianter · Dec 11, 2024 · e7c8b49 · e7c8b49
1 parent 61dd701
commit e7c8b49
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/components/sections/hero/Hero.tsx b/src/components/sections/hero/Hero.tsx
@@ -19,7 +19,7 @@ export const Hero = ({ hero, isLanding = false }: HeroProps) => {
         <div className={styles.secondary}>
           <Text type="bodyBig"> {hero.title}</Text>
           <Text type="h1">{hero.description}</Text>
-          <div className={styles.img}>
+          <div className={styles.image}>
             <SanityImage image={hero.image} />
           </div>
         </div>

diff --git a/src/components/sections/hero/hero.module.css b/src/components/sections/hero/hero.module.css
@@ -24,7 +24,7 @@
   composes: shared;
   align-self: center;
   padding: var(--padding-xl) var(--padding-rem);
-  gap: var(--padding-rem); 
+  gap: var(--padding-rem);
 
   @media (max-width: 834px) {
     padding: var(--padding-l) var(--padding-s);
@@ -35,11 +35,30 @@
   }
 }
 
-.img{
+.image {
   width: 100%;
-  max-width: 60rem;
+  /* max-width: 30rem; */
   justify-content: flex-end;
-  display: flex !important; 
+  display: flex !important;
+  padding: var(--padding-xl) var(--padding-rem) var(--padding-rem)
+    var(--padding-rem);
+
+  @media (max-width: 834px) {
+    padding: var(--padding-l) var(--padding-rem) var(--padding-rem)
+      var(--padding-rem);
+  }
+
+  @media (max-width: 425px) {
+    padding: var(--padding-s) var(--padding-rem) var(--padding-rem)
+      var(--padding-rem);
+  }
+}
+
+.image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 42rem !important;
 }
 
 .primary {