<main>
  <section data-surface="default">
    <h2>Default Section</h2>
    <div class="grid">
      <div class="card">
        <h3>Card</h3>
        <p>Lorem ipsum dolor sit.</p>
      </div>
      <div class="card">
        ...
      </div>
      <div class="card">
        ...
      </div>
      <div class="card">
        ...
      </div>
    </div>
  </section>
  
  <section data-surface="dark">
    <h2>Dark Section</h2>
    ...
  </section>
  
  <section data-surface="muted">
    <h2>Muted Section</h2>
    ...
  </section>
</main>