feat: responsiveness

src/components/landing/HeroSection.astro

@@ -40,17 +40,39 @@ import ArrowDown from "../icons/ArrowDown.astro";
     padding-inline: var(--padding-x);
     max-width: var(--max-content-width);
     margin-inline: auto;
-
-    @media screen (min-width: 21rem) {
-
-    }
   }
 
   .image-wrapper {
-    grid-column: -1 / -6;
+    grid-column: 4 / -1;
     grid-row: 1;
-    /* width: 100%; */
     max-height: clamp(400px, 70vh, 1000px);
+    position: relative;
+    z-index: -1;
+
+    @media screen and (min-width: 50rem) {
+      grid-column: 5 / -1;
+    }
+
+    @media screen and (min-width: 75rem) {
+      grid-column: -1 / -6;
+    }
+
+  }
+
+  .image-wrapper::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: var(--gradient-overlay);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    @media screen and (max-width: 63.9375rem) {
+      backdrop-filter: blur(10px);
+    }
   }
 
   .image {
@@ -73,7 +95,7 @@ import ArrowDown from "../icons/ArrowDown.astro";
   }
 
   h1 {
-    grid-column: 2 / -2;
+    grid-column: 1 / -1;
     grid-row: 1;
     align-self: end;
 
@@ -82,18 +104,34 @@ import ArrowDown from "../icons/ArrowDown.astro";
     letter-spacing: var(--tracking-narrow);
     font-weight: 600;
 
+    @media screen and (min-width: 50rem) {
+      grid-column: 2 / -2;
+    }
+
+    @media screen and (min-width: 64rem) {
+      grid-column: 2 / -2;
+    }
+
     & span {
       display: block;
     }
   }
 
   p {
-    grid-column: 3 / -5;
+    grid-column: 2 / -1;
     grid-row: 2;
 
     max-width: 45ch;
     font-size: var(--fs-md);
     line-height: var(--leading-paragraph);
+
+    @media screen and (min-width: 50rem) {
+      grid-column: 3 / -5;
+    }
+
+    @media screen and (min-width: 64rem) {
+      grid-column: 3 / -5;
+    }
   }
 
   .down {
@@ -140,7 +178,7 @@ import ArrowDown from "../icons/ArrowDown.astro";
       tl.addLabel("arrow", 1.5);
 
       tl.from(
-        heroSection.querySelector(".image"),
+        heroSection.querySelector(".image-wrapper"),
         {
           duration: 2,
           opacity: 0,