styles/typography.css

@@ -3,36 +3,12 @@
   --font-size-body: 1rem;
   --font-size-small: 0.875rem;
   --font-size-lead: 1.125rem;
-  --font-size-h1: clamp(
-    2.566rem,
-    calc(
-      2.566rem + (3.247rem - 2.566rem) * ((100vw - 768px) / (1024px - 768px))
-    ),
-    3.247rem
-  );
-  --font-size-h2: clamp(
-    2.027rem,
-    calc(
-      2.027rem + (2.566rem - 2.027rem) * ((100vw - 768px) / (1024px - 768px))
-    ),
-    2.566rem
-  );
 
-  --font-size-h3: clamp(
-    1.602rem,
-    calc(
-      1.602rem + (2.027rem - 1.602rem) * ((100vw - 768px) / (1024px - 768px))
-    ),
-    2.027rem
-  );
-
-  --font-size-h4: clamp(
-    1.266rem,
-    calc(
-      1.266rem + (1.602rem - 1.266rem) * ((100vw - 768px) / (1024px - 768px))
-    ),
-    1.602rem
-  );
+  --font-size-h1: 1.802rem;
+  --font-size-h2: 1.602rem;
+  --font-size-h3: 1.424rem;
+  --font-size-h4: 1.266rem;
+  --font-size-h5: 1.125rem;
 
   --line-height-body: 1.5;
   --line-height-heading: 1.2;
@@ -52,6 +28,26 @@
   --font-heading-color: #302e2e;
 }
 
+@media (min-width: 768px) {
+  :root {
+    --font-size-h1: 2.566rem;
+    --font-size-h2: 2.281rem;
+    --font-size-h3: 2.027rem;
+    --font-size-h4: 1.802rem;
+    --font-size-h5: 1.602rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  :root {
+    --font-size-h1: 3.247rem;
+    --font-size-h2: 2.566rem;
+    --font-size-h3: 2.027rem;
+    --font-size-h4: 1.802rem;
+    --font-size-h5: 1.602rem;
+  }
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -91,12 +87,19 @@ h6 {
 h1 {
   font-size: var(--font-size-h1);
 }
+
 h2 {
   font-size: var(--font-size-h2);
 }
+
 h3 {
   font-size: var(--font-size-h3);
 }
+
 h4 {
   font-size: var(--font-size-h4);
 }
+
+h5 {
+  font-size: var(--font-size-h5);
+}