diff --git a/src/components/ReferenceDirectoryWithFilter/index.tsx b/src/components/ReferenceDirectoryWithFilter/index.tsx
index 2a1c6baa1f..b3329b588c 100644
--- a/src/components/ReferenceDirectoryWithFilter/index.tsx
+++ b/src/components/ReferenceDirectoryWithFilter/index.tsx
@@ -267,22 +267,24 @@ export const ReferenceDirectoryWithFilter = ({
     }
     return filteredEntries.map((category) => (
       <section key={category.name}>
-        <h2
-          class={
-            subcatShouldHaveHeading(category.subcats[0], category)
-              ? "mb-0"
-              : "mb-[var(--gutter-md)]"
-          }
-          id={category.name}
-        >
+        <h2 class="mb-0" id={category.name}>
           {category.name}
         </h2>
-        {category.subcats.map((subcat) => (
-          <div key={subcat.name}>
-            {getSubcatHeading(subcat, category)}
-            {renderEntries(subcat.entries)}
-          </div>
-        ))}
+        {category.subcats.map((subcat) => {
+          const hasHeading = subcatShouldHaveHeading(subcat, category);
+          if (!hasHeading && subcat.entries.length === 0) {
+            return null;
+          }
+          return (
+            <div
+              key={subcat.name}
+              class={!hasHeading ? "mt-[var(--gutter-md)]" : undefined}
+            >
+              {getSubcatHeading(subcat, category)}
+              {renderEntries(subcat.entries)}
+            </div>
+          );
+        })}
       </section>
     ));
   };
diff --git a/styles/global.scss b/styles/global.scss
index 5c2116ce00..9d7800b05d 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -247,7 +247,9 @@ section,
   h2,
   .text-h2 {
     margin-top: var(--gutter-md);
-    margin-bottom: 0px;
+    @layer components {
+      margin-bottom: 0px;
+    }
   }
 
   h2,