Update .headings SCSS code and docs

css/pico.css

@@ -798,25 +798,15 @@ ul ~ h6 {
   margin-top: var(--typography-spacing-vertical);
 }
 
-hgroup {
+hgroup,
-  margin-bottom: var(--typography-spacing-vertical);
-}
-hgroup > * {
-  margin-bottom: 0;
-}
-hgroup > *:last-child {
-  --color: var(--muted-color);
-  --font-weight: unset;
-  font-size: 1rem;
-  font-family: unset;
-}
-
 .headings {
   margin-bottom: var(--typography-spacing-vertical);
 }
+hgroup > *,
 .headings > * {
   margin-bottom: 0;
 }
+hgroup > *:last-child,
 .headings > *:last-child {
   --color: var(--muted-color);
   --font-weight: unset;

css/pico.slim.css

@@ -727,25 +727,15 @@ ul ~ h6 {
   margin-top: var(--typography-spacing-vertical);
 }
 
-hgroup {
+hgroup,
-  margin-bottom: var(--typography-spacing-vertical);
-}
-hgroup > * {
-  margin-bottom: 0;
-}
-hgroup > *:last-child {
-  --color: var(--muted-color);
-  --font-weight: unset;
-  font-size: 1rem;
-  font-family: unset;
-}
-
 .headings {
   margin-bottom: var(--typography-spacing-vertical);
 }
+hgroup > *,
 .headings > * {
   margin-bottom: 0;
 }
+hgroup > *:last-child,
 .headings > *:last-child {
   --color: var(--muted-color);
   --font-weight: unset;

docs/src/typography.html

@@ -120,7 +120,7 @@
           </article>
           <p>
             Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a
-            <code>&lt;<b>div class="headings"</b>&gt;</code> all
+            <code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all
             <code><i>margin-bottom</i></code> are collapsed and the
             <code>:last-child</code> is muted.
           </p>
@@ -135,7 +135,7 @@
   &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
 &lt;/<b>hgroup</b>&gt;</code></pre>
 
-              <pre><code>&lt;<b>div class="headings"</b>&gt;
+              <pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
   &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
   &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
 &lt;/<b>div</b>&gt;</code></pre>

docs/typography.html

@@ -5,10 +5,10 @@
 &lt;<b>h3</b>&gt;Heading 3&lt;/<b>h3</b>&gt;
 &lt;<b>h4</b>&gt;Heading 4&lt;/<b>h4</b>&gt;
 &lt;<b>h5</b>&gt;Heading 5&lt;/<b>h5</b>&gt;
-&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre></footer></article><p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a <code>&lt;<b>div class="headings"</b>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p><article aria-label="Hgroup example"><div class="headings"><h2>Heading 2</h2><h3>Subtitle for heading 2</h3></div><footer class="code"><pre><code>&lt;<b>hgroup</b>&gt;
+&lt;<b>h6</b>&gt;Heading 6&lt;/<b>h6</b>&gt;</code></pre></footer></article><p>Inside a <code>&lt;<b>hgroup</b>&gt;</code> or a <code>&lt;<b>div</b> <i>class</i>=<u>"headings"</u>&gt;</code> all <code><i>margin-bottom</i></code> are collapsed and the <code>:last-child</code> is muted.</p><article aria-label="Hgroup example"><div class="headings"><h2>Heading 2</h2><h3>Subtitle for heading 2</h3></div><footer class="code"><pre><code>&lt;<b>hgroup</b>&gt;
   &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
   &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
-&lt;/<b>hgroup</b>&gt;</code></pre><pre><code>&lt;<b>div class="headings"</b>&gt;
+&lt;/<b>hgroup</b>&gt;</code></pre><pre><code>&lt;<b>div</b> <i>class</i>=<u>"headings</u>"&gt;
   &lt;<b>h2</b>&gt;Heading 2&lt;/<b>h2</b>&gt;
   &lt;<b>h3</b>&gt;Subtitle for heading 2&lt;/<b>h3</b>&gt;
 &lt;/<b>div</b>&gt;</code></pre></footer></article><p>Inline text elements:</p><article aria-label="Inline text examples"><div class="grid"><div><p><abbr title="Abbreviation">Abbr.</abbr> <code>abbr</code></p><p><strong>Bold</strong> <code>strong</code> <code>b</code></p><p><em>Italic</em> <code>i</code> <code>em</code> <code>cite</code></p><p><del>Deleted</del> <code>del</code></p><p><ins>Inserted</ins> <code>ins</code></p><p><kbd>Ctrl + S</kbd> <code>kbd</code></p></div><div><p><mark>Highlighted</mark> <code>mark</code></p><p><s>Strikethrough</s> <code>s</code></p><p><small>Small </small><code>small</code></p><p>Text <sub>Sub</sub> <code>sub</code></p><p>Text <sup>Sup</sup> <code>sup</code></p><p><u>Underline</u> <code>u</code></p></div></div></article><p>Links come with <code>.secondary</code> and <code>.contrast</code> styles.</p><article aria-label="Links examples"><a href="#" onclick="event.preventDefault()">Primary</a><br/><a href="#" onclick="event.preventDefault()" class="secondary">Secondary</a><br/><a href="#" onclick="event.preventDefault()" class="contrast">Contrast</a><br/><footer class="code"><pre><code>&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Primary&lt;/<b>a</b>&gt;

scss/content/_typography.scss

@@ -181,22 +181,25 @@ ul {
 }
 
 // Heading group
-hgroup {
+@if $enable-classes == false {
-  margin-bottom: var(--typography-spacing-vertical);
+  hgroup {
+    margin-bottom: var(--typography-spacing-vertical);
 
-  > * {
+    > * {
-    margin-bottom: 0;
+      margin-bottom: 0;
-  }
+    }
 
-  > *:last-child {
+    > *:last-child {
-    --color: var(--muted-color);
+      --color: var(--muted-color);
-    --font-weight: unset;
+      --font-weight: unset;
-    font-size: 1rem;
+      font-size: 1rem;
-    font-family: unset;
+      font-family: unset;
+    }
   }
 }
 
 @if $enable-classes {
+  hgroup,
   .headings {
     margin-bottom: var(--typography-spacing-vertical);