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

  <h3>Gradient</h3>
  <div class="demo-row">
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="gradient" data-device="desktop"></div>
      <span class="background-label">Desktop</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="gradient" data-device="tablet"></div>
      <span class="background-label">Tablet</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="gradient" data-device="mobile"></div>
      <span class="background-label">Mobile</span>
    </div>
  </div>

  <h3>Shape</h3>
  <div class="demo-row">
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="shape" data-device="desktop"></div>
      <span class="background-label">Desktop</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="shape" data-device="tablet"></div>
      <span class="background-label">Tablet</span>
    </div>
    <div class="background-preview">
      <div class="vmk-bg is-preview" data-variant="shape" data-device="mobile"></div>
      <span class="background-label">Mobile</span>
    </div>
  </div>

  <style>
    .background-preview {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-radius: 16px;
      overflow: hidden;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(31, 31, 31, 0.08);
    }
    .background-preview .vmk-bg {
      width: 100%;
      height: 220px;
    }
    .background-preview:nth-child(1) .vmk-bg { width: 420px; }
    .background-preview:nth-child(2) .vmk-bg { width: 210px; }
    .background-preview:nth-child(3) .vmk-bg { width: 140px; }
    .background-label {
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1F1F1F;
    }
  </style>
</section>