<h2>Table of Contents</h2>
<nav class="c-nav">
  <ul>
    <li><a href="#columns-default">Columns</a></li>
    <li><a href="#columns-muted">Columns - Muted</a></li>
    <li><a href="#columns-dark">Columns - Dark</a></li>
  </ul>
</nav>

<dl>
  <dt id="columns-default">
    Columns, Content Stretched &amp; Not
  </dt>
  <dd>
    <section class="row">
      <div class="col col-stretch-content-y">
        <article class="c-card c-card--plain">
          <h3>Stretched</h3>
          <p>{{> @text-of-one-sentence }}</p>
          <p>Stretched columns expect only one direct child, like a card.</p>
        </article>
      </div>
      <div class="col">
        <article class="c-card c-card--plain">
          <h3>Regular</h3>
          <p>{{> @text-of-one-sentence }}</p>
        </article>
        <p>Regular columns support many direct children.</p>
        <p>Buttons can change color per section.</p>
        <div class="demo-buttons">{{> @button-samples }}</div>
      </div>
      <div class="col">
        <article class="c-card c-card--plain">
          <h3>Regular</h3>
          <p>{{> @text-of-one-paragraph-medium }}</p>
        </article>
      </div>
    </section>
  </dd>

  <dt id="columns-muted">
    Muted Columns, Content Stretched &amp; Not
  </dt>
  <dd>
    <section class="row">
      <div class="col col-stretch-content-y col-muted">
        <article class="c-card c-card--plain">
          <h3>Stretched</h3>
          <p>{{> @text-of-one-sentence }}</p>
          <p>Stretched columns expect only one direct child, like a card.</p>
        </article>
      </div>
      <div class="col col-muted">
        <article class="c-card c-card--plain">
          <h3>Regular</h3>
          <p>{{> @text-of-one-sentence }}</p>
        </article>
        <p>Regular columns support many direct children.</p>
        <p>Buttons can change color per section.</p>
        <div class="demo-buttons">{{> @button-samples }}</div>
      </div>
      <div class="col col-muted">
        <article class="c-card c-card--plain">
          <h3>Regular</h3>
          <p>{{> @text-of-one-paragraph-medium }}</p>
        </article>
      </div>
    </section>
  </dd>

  <dt id="columns-dark">
    Dark Columns, Content Stretched &amp; Not
  </dt>
  <dd>
    <section class="row">
      <div class="col col-stretch-content-y col-dark">
        <article class="c-card c-card--plain">
          <h3>Stretched</h3>
          <p>{{> @text-of-one-sentence }}</p>
          <p>Stretched columns expect only one direct child, like a card.</p>
        </article>
      </div>
      <div class="col col-dark">
        <article class="c-card c-card--plain">
          <h3>(Regular)</h3>
          <p>{{> @text-of-one-sentence }}</p>
        </article>
        <p>Regular columns support many direct children.</p>
        <p>Buttons can change color per section.</p>
        <div class="demo-buttons">{{> @button-samples }}</div>
      </div>
      <div class="col col-dark">
        <article class="c-card c-card--plain">
          <h3>Regular</h3>
          <p>{{> @text-of-one-paragraph-medium }}</p>
        </article>
      </div>
    </section>
  </dd>
</dl>
