Payment card

<div class="pay-grid">
  <div class="bank-card" style="--h: 265" role="img" aria-label="Card preview">
    <div class="bc-top"><span class="bc-chip"></span><span class="bc-brand">VISA</span></div>
    <div class="bc-number">4242 4242 4242 4242</div>
    <div class="bc-foot">
      <div><small>Card holder</small><b>Maya Lindqvist</b></div>
      <div><small>Expires</small><b>08/29</b></div>
    </div>
  </div>
  <form action="#" novalidate data-validate data-demo data-success="Card saved">
    <div class="form-grid">
      <div class="span-2">
        <label class="form-label" for="pc-name">Name on card</label><input id="pc-name" name="pc-name" type="text" value="Maya Lindqvist" required autocomplete="cc-name" class="input">
      </div>
      <div class="span-2">
        <label class="form-label" for="pc-num">Card number</label>
        <div class="field">
          <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
          <input id="pc-num" name="pc-num" type="text" placeholder="4242 4242 4242 4242" required autocomplete="cc-number" inputmode="numeric" data-mask="card">
        </div>
      </div>
      <div>
        <label class="form-label" for="pc-exp">Expires</label><input id="pc-exp" name="pc-exp" type="text" placeholder="MM/YY" required autocomplete="cc-exp" inputmode="numeric" data-mask="expiry" class="input">
      </div>
      <div>
        <label class="form-label" for="pc-cvc">Security code</label><input id="pc-cvc" name="pc-cvc" type="text" placeholder="123" required autocomplete="cc-csc" inputmode="numeric" data-mask="cvc" class="input">
      </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Save card</button>
    </div>
  </form>
</div>