docs: ensure spacing between header sections

docs/styles/pages/backpage.css

@@ -57,6 +57,15 @@
     position: relative;
   }
 
+  /* when a section is used */
+  .container > section {
+    margin-block-start: var(--rh-space-6xl, 96px);
+  }
+
+  .container > section:first-of-type {
+    margin-block-start: 0;
+  }
+
   /*
   when in a article container
   where a h2 or uxdot-copy-permalink is used
@@ -66,7 +75,7 @@
   /* not when the h2 is a child of a section */
   .container > :not(section, uxdot-copy-permalink) > :where(uxdot-copy-permalink.h2, h2),
   /* if a section landmark is used */
-  .container > section {
+  .container > section > :where(uxdot-copy-permalink.h2, h2) {
     margin-block-start: var(--rh-space-6xl, 96px);
   }
 
@@ -82,6 +91,32 @@
     margin-block-start: 0;
   }
 
+  /*
+  when in a article container
+  where a h3 or uxdot-copy-permalink is used
+  as a section break (no landmark)
+  */
+  .container > :where(uxdot-copy-permalink.h3, h3),
+  /* not when the h2 is a child of a section */
+  .container > :not(section, uxdot-copy-permalink) > :where(uxdot-copy-permalink.h3, h3),
+  /* if a section landmark is used */
+  .container > section > :where(uxdot-copy-permalink.h3, h3){
+    margin-block-start: var(--rh-space-4xl, 64px);
+  }
+
+  /*
+  when in a article container
+  where a h4 or uxdot-copy-permalink is used
+  as a section break (no landmark)
+  */
+  .container > :where(uxdot-copy-permalink.h4, h4),
+  /* not when the h2 is a child of a section */
+  .container > :not(section, uxdot-copy-permalink) > :where(uxdot-copy-permalink.h4, h4),
+  /* if a section landmark is used */
+  .container > section > :where(uxdot-copy-permalink.h4, h4) {
+    margin-block-start: var(--rh-space-3xl, 48px);
+  }
+
   @container main (min-width: 567px) {
     aside {
       padding-inline: var(--rh-space-2xl, 32px);