Bento grid with mixed UI mockup cards

<section class="sw-bento">
  <div class="sw-bento-grid">
    <div class="sw-bento-card sw-bento-wide">
      <h3>Accept payments everywhere</h3>
      <p>Take cards, wallets and local methods online, in person, and around the world.</p>
      <div class="sw-mock-terminal">
        <div class="sw-mock-row"><span>Mocha Latte</span><span>$5.50</span></div>
        <div class="sw-mock-row sw-mock-dim"><span>Loyalty (10% off)</span><span>-$0.55</span></div>
        <div class="sw-mock-row sw-mock-total"><span>Total</span><span>$5.46</span></div>
        <div class="sw-mock-tap">Tap, insert or swipe to pay</div>
      </div>
    </div>
    <div class="sw-bento-card">
      <h3>Meter any usage model</h3>
      <p>Bill flat rate, per seat, or by consumption.</p>
      <div class="sw-mock-meter">
        <div class="sw-mock-meter-label">Tokens used (30d)</div>
        <div class="sw-mock-meter-value">1,500,000,000</div>
        <div class="sw-mock-meter-bar"><span></span></div>
      </div>
    </div>
    <div class="sw-bento-card">
      <h3>Sell through AI agents</h3>
      <p>Let assistants complete purchases on your behalf.</p>
      <div class="sw-mock-chat">
        <div class="sw-mock-bubble">Can you recommend a cosy basic in size M?</div>
        <div class="sw-mock-bubble sw-mock-bubble-reply">Here are two options that pair well. Buy now &rarr;</div>
      </div>
    </div>
  </div>
</section>