<section class="section 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>
</section>

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

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