feat: responsiveness

src/components/landing/AboutSection.astro

@@ -51,62 +51,89 @@ import { Picture } from "astro:assets";
         grid-template-columns: var(--base-grid);
         max-width: var(--max-content-width);
         margin-inline: auto;
-        padding-block: 8rem 5.5rem;
+        padding-block: 5rem;
         padding-inline: var(--padding-x);
 
-        & h2 {
-            grid-column: 1 / 6;
+        @media screen and (min-width: 64rem) {
+            padding-block: 8rem 5.5rem;
+        }
 
-            font-size: 4.75rem;
+        & h2 {
+            grid-column: 1 / -1;
+
+            font-size: var(--fs-xl);
             line-height: var(--leading-title);
             letter-spacing: var(--tracking-narrow);
 
             span {
                 display: block;
             }
+
+            @media screen and (min-width: 64rem) {
+                grid-column: 1 / 7;
+            }
         }
 
         & div {
-            grid-column: -1 / -6;
+            grid-column: 1 / -1;
 
             font-size: 1.125rem;
             line-height: var(--leading-paragraph);
 
+            @media screen and (max-width: 63.9375rem) {
+                margin-top: 1rem;
+            }
+
             > p {
-                margin-top: var(--fs-md);
+                margin-top: 1.5rem;
+
+                @media screen and (max-width: 63.9375rem) {
+                    max-width: 52ch;
+                }
+            }
+
+            @media screen and (min-width: 64rem) {
+                grid-column: -7 / -1;
             }
         }
     }
 
     .image {
         display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        justify-content: center;
-        align-items: center;
+        place-items: center;
         margin-bottom: 8rem;
-        min-height: 400px;
-        max-height: 500px;
+        width: 100%;
+        height: 100%;
+        /* max-height: 400px; */
 
         & picture {
             display: block;
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
+            width: 100%;
+            height: 100%;
+            max-height: 500px;
+            grid-column: 1;
+            grid-row: 1;
         }
 
         & .background {
             display: block;
             width: 100%;
+            height: 100%;
             max-width: 100%;
             object-fit: cover;
         }
 
         & p {
-            grid-column: 2;
+            grid-column: 1;
             grid-row: 1;
             max-width: 43ch;
-            font-size: 2rem;
+            font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
             line-height: var(--leading-paragraph);
             z-index: 1;
+
+            @media screen and (max-width: 63.9375rem) {
+                padding: 3rem;
+            }
         }
     }
 </style>

src/components/landing/ContactSection.astro

@@ -58,10 +58,10 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
 
   .content {
     grid-column: 3 / 12;
-    grid-row: 1;
     align-content: center;
-
+    
     @media screen and (min-width: 50rem) {
+      grid-row: 1;
       grid-column: 6 / -1;
     }
   }
@@ -89,9 +89,9 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
     width: max-content;
     margin-inline: auto;
 
-    margin-top: 15rem;
+    margin-top: 8rem;
 
-    font-size: clamp(3rem, 3vw + 3rem, 6.25rem);
+    font-size: clamp(2.5rem, 5vw + 1rem, 6.25rem);
     font-weight: 600;
     text-transform: uppercase;
 
@@ -99,6 +99,10 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
       line-height: var(--leading-tightest);
       letter-spacing: var(--tracking-narrow);
     }
+
+    @media screen and (min-width: 64vw) {
+      margin-top: 12rem;
+    }
   }
 </style>
 

src/components/landing/ValuesSection.astro

@@ -48,59 +48,84 @@ function formatIndex(index: number) {
         grid-template-columns: var(--base-grid);
         max-width: var(--max-content-width);
         margin-inline: auto;
-        padding-block: 8rem 5.5rem;
+        padding-block: 4rem;
         padding-inline: var(--padding-x);
+
+        @media screen and (min-width: 50rem) {
+            padding-block: 8rem 5.5rem;
+        }
     }
 
     h2 {
         grid-column: 1 / -1;
-        font-size: 4.75rem;
+        font-size: var(--fs-xl);
         line-height: var(--leading-title);
         letter-spacing: var(--tracking-narrow);
         text-align: center;
     }
 
     ul {
-        margin-top: 5.5rem;
+        margin-top: 3rem;
         list-style: none;
         grid-column: 1 / -1;
 
         > * {
             border-bottom: 0.25rem solid hsl(0 100 100 / 30%);
         }
+
+        @media screen and (min-width: 50rem) {
+            margin-top: 5.5rem;
+        }
     }
 
     li {
         display: grid;
         grid-template-columns: var(--base-grid);
-        padding-block: 6rem;
+        padding-block: 4rem;
+
+        @media screen and (min-width: 50rem) {
+            padding-block: 6rem;
+        }
     }
 
     .content {
-        grid-row: 1;
-        grid-column: 5 / -1;
+        grid-column: 1 / -1;
+
+        @media screen and (max-width: 49.9375rem) {
+            margin-top: 2rem;
+        }
+
+        @media screen and (min-width: 50rem) {
+            grid-row: 1;
+            grid-column: 5 / -1;
+        }
     }
 
     h3 {
-        font-size: 3rem;
+        font-size: clamp(2.25rem, 2.5vw + 1rem, 3rem);
         line-height: var(--leading-title);
     }
 
     p {
         margin-top: 1.875rem;
-        font-size: 1.5rem;
+        font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
         line-height: var(--leading-paragraph);
     }
 
     span {
         display: inline-block;
         height: max-content;
+
         grid-row: 1;
-        grid-column: 1 / 4;
+        grid-column: 1 / -1;
 
         font-size: clamp(10rem, 16vw, 15.625rem);
         font-weight: 600;
         line-height: var(--leading-tightest);
+
+        @media screen and (min-width: 50rem) {
+            grid-column: 1 / 4;
+        }
     }
 </style>