<section class="section">
  <div class="container">
    <header class="section__header">
      <h2 class="h6 accent-primary">Section leading subheading</h2>
      <h2>
        This is the section heading.
      </h2>
      <p></p>
    </header>
    <div class="section__content">
      <p>
        This if the content of the section, <code>.section__content</code>. Depending on the type of section, this is likely where the bulk of the differentiation occurs.
      </p>
    </div>
    <footer class="section__footer">
      <p>
        This is the section footer.
      </p>
      <div class="actions">
        <a class="button" href="">Learn More</a>
      </div>
    </footer>
  </div>
</section>

.section {
  --accent-color: #fff;

  row-gap: 16px;
  padding: 5rem 0;
  background: var(--accent-color);
  color: var(--accent-color-text);

  .container {
    row-gap: 16px;
  }
}