reduce the heading sizes on small breakpoints.

alaynali · May 10, 2020 · 443f5e0 · 443f5e0
1 parent 9281cf2
commit 443f5e0
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/index.css b/index.css
@@ -26,7 +26,7 @@
     --font-size-small: 1.8rem;
     --font-size-normal: 2.2rem;
     --font-size-medium: 2.8rem;
-    --font-size-medium-1: 3.5rem;
+    --font-size-medium-1: 3.6rem;
     --font-size-large: 5.5rem;
     --font-size-huge: 7.5rem;
     --font-stack: 'Hk Grotesk', sans-serif;
@@ -140,12 +140,6 @@ h3 {
     }
 }
 
-@media(max-width: 500px) {
-    .heading-primary {
-        font-size: var(--font-size-large);
-    }
-}
-
 h2 {
     font-size: var(--font-size-large);
     margin-bottom: var(--gutter-medium);
@@ -165,6 +159,20 @@ h3 {
     margin-bottom: var(--gutter-normal);
 }
 
+@media(max-width: 500px) {
+    .heading-primary {
+        font-size: var(--font-size-large);
+    }
+
+    h2 {
+        font-size: var(--font-size-medium-1);
+    }
+
+    h3 {
+        font-size: var(--font-size-medium);
+    }
+}
+
 p {
     margin: var(--gutter-small-1) 0;
 }