mobile layout work

css/base.css

@@ -19,6 +19,12 @@
     --grid-cols: 3;
 }
 
+@media (max-width: 1024px) {
+    :root {
+        --grid-cols: 2;
+    }
+}
+
 @media (max-width: 768px) {
     :root {
         --grid-cols: 1;
@@ -27,12 +33,14 @@
 
 body {
     background-color: var(--surface);
-    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-family: "Plus Jakarta Sans", sans-serif;
     box-sizing: border-box;
 }
 
-
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
     margin: 0;
     font-family: serif;
     color: var(--on-background);
@@ -53,6 +61,22 @@ h2 {
     font-size: 3.5rem;
 }
 
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2.5rem;
+        line-height: 2.5rem;
+    }
+
+    h2 {
+        font-size: 2rem;
+        line-height: 2rem;
+    }
+
+    h3 {
+        font-size: 1.25rem;
+    }
+}
+
 h3 {
     font-size: 1.5rem;
 }
@@ -63,7 +87,6 @@ h4 {
 
 h5 {
     font-size: 0.8rem;
-
 }
 
 p {
@@ -71,15 +94,26 @@ p {
     line-height: 1.5rem;
 }
 
-body > nav, body > footer, body > main > * {
+body > nav,
+body > footer,
+body > main > * {
     padding: 8rem 2rem;
 
-    & > div:only-child, &:not(:has(>div:only-child)) {
+    & > div:only-child,
+    &:not(:has(> div:only-child)) {
         max-width: var(--max-content-width);
         margin: 0 auto;
     }
 }
 
+@media (max-width: 768px) {
+    body > nav,
+    body > footer,
+    body > main > * {
+        padding: 4rem 1rem;
+    }
+}
+
 body > nav {
     padding: 1rem;
 }
@@ -98,4 +132,3 @@ ul {
 img {
     color: transparent;
 }
-