From 8402b33ad7eb97a62d2ef1dc49f24b5ffee55285 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Fri, 31 Oct 2025 13:37:07 -0500
Subject: [PATCH] fix(site): improve header typography

---
 site/src/components/typography/H2Markdown.astro | 4 ++--
 site/src/components/typography/H3Markdown.astro | 4 ++--
 site/src/components/typography/H5.astro         | 5 ++++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/site/src/components/typography/H2Markdown.astro b/site/src/components/typography/H2Markdown.astro
index 528ea769..97ebf28a 100644
--- a/site/src/components/typography/H2Markdown.astro
+++ b/site/src/components/typography/H2Markdown.astro
@@ -1,8 +1,8 @@
 ---
 import H4 from './H4.astro';
-const props = Astro.props;
+const { class: className, ...props } = Astro.props;
 ---
 
-<H4 as="h2" {...props}>
+<H4 as="h2" class:list={['mt-18 [&+h3]:mt-6', className]} {...props}>
   <slot />
 </H4>
diff --git a/site/src/components/typography/H3Markdown.astro b/site/src/components/typography/H3Markdown.astro
index 016c521a..4bdb7f54 100644
--- a/site/src/components/typography/H3Markdown.astro
+++ b/site/src/components/typography/H3Markdown.astro
@@ -1,8 +1,8 @@
 ---
 import H5 from './H5.astro';
-const props = Astro.props;
+const { class: className, ...props } = Astro.props;
 ---
 
-<H5 as="h3" {...props}>
+<H5 as="h3" class:list={['mt-12', className]} {...props}>
   <slot />
 </H5>
diff --git a/site/src/components/typography/H5.astro b/site/src/components/typography/H5.astro
index 929b1e77..1774a208 100644
--- a/site/src/components/typography/H5.astro
+++ b/site/src/components/typography/H5.astro
@@ -12,7 +12,10 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('font-medium @lg:text-lg @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(
+    clsx('text-md font-medium @lg:text-lg @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'),
+    className,
+  )}
   {...props}
 >
   <slot />