<section class="padding-y-xl">
  <div class="container max-width-sm">
    <article class="text-component line-height-lg v-space-md">
      <h1>Section One</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora optio earum suscipit quasi possimus mollitia! Assumenda, maxime quis dolor soluta optio molestias accusamus, harum vero ipsum officia quo eaque nulla praesentium debitis eum non facilis velit consectetur. At, voluptates animi!</p>
    </article>
  </div>
</section>

<section class="padding-y-xl bg-primary color-bg">
  <div class="container max-width-sm">
    <article class="text-component line-height-lg v-space-md">
      <h1 class="color-inherit">Section Two</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora optio earum suscipit quasi possimus mollitia! Assumenda, maxime quis dolor soluta optio molestias accusamus, harum vero ipsum officia quo eaque nulla praesentium debitis eum non facilis velit consectetur. At, voluptates animi!</p>
    </article>
  </div>
</section>

<section class="padding-y-lg">
  <div class="container max-width-sm bg-contrast-higher color-bg padding-md">
    <article class="text-component line-height-lg v-space-md">
      <h1 class="color-inherit">Section Three</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora optio earum suscipit quasi possimus mollitia! Assumenda, maxime quis dolor soluta optio molestias accusamus, harum vero ipsum officia quo eaque nulla praesentium debitis eum non facilis velit consectetur. At, voluptates animi!</p>
    </article>
  </div>
</section>