<section class="demo-section">
  <h2>Cards</h2>

  <div class="demo-row" style="align-items: stretch;">
    <article class="card" style="max-width: 320px;">
      <header class="card-title">Default card</header>
      <div class="card-content">
        A simple card with title, content, and footer.
      </div>
      <footer class="card-footer">
        <button class="btn btn-primary btn-sm">Action</button>
      </footer>
    </article>

    <article class="card card-filled" style="max-width: 320px;">
      <header class="card-title">Filled card</header>
      <div class="card-content">
        Uses a subtle background fill instead of white.
      </div>
      <footer class="card-footer">
        <button class="btn btn-secondary btn-sm">Action</button>
      </footer>
    </article>

    <article class="card card-outlined" style="max-width: 320px;">
      <header class="card-title">Outlined card</header>
      <div class="card-content">
        Transparent background with a stronger border.
      </div>
      <footer class="card-footer">
        <button class="btn btn-tertiary btn-sm">Action</button>
      </footer>
    </article>
  </div>

  <div class="demo-row" style="align-items: stretch;">
    <article class="card card-primary" style="max-width: 320px;">
      <div class="card-content">
        Primary accent card with yellow tint.
      </div>
    </article>

    <article class="card card-secondary" style="max-width: 320px;">
      <div class="card-content">
        Secondary accent card with mint tint.
      </div>
    </article>

    <article class="card card-elevated" style="max-width: 320px;">
      <div class="card-content">
        Elevated card with a soft shadow.
      </div>
    </article>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row" style="align-items: stretch;">
    <article class="card card-sm" style="max-width: 240px;">
      <header class="card-title">Small card</header>
      <div class="card-content">Compact padding and radius.</div>
    </article>

    <article class="card card-lg" style="max-width: 360px;">
      <header class="card-title">Large card</header>
      <div class="card-content">Generous padding and larger radius.</div>
    </article>
  </div>
</section>