UI Element Pixel Compare

<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6 md:p-8" aria-labelledby="add-card-details-1-title">
  <h2 id="add-card-details-1-title" class="sr-only">Add Card Details</h2>

  <form class="border-color-default bg-color-modal flex w-full max-w-7xl flex-col items-end gap-8 overflow-hidden rounded border p-8 md:gap-9 md:p-9 xl:gap-10 xl:p-10">
    <div class="flex w-full flex-col gap-6">
      <plus-input id="add-card-details-1-cardholder" label="Cardholder Name *" placeholder="Cardholder Name" autocomplete="cc-name" size="lg" full-width></plus-input>

      <plus-input id="add-card-details-1-card-number" label="Card Number *" placeholder="Card Number" autocomplete="cc-number" inputmode="numeric" size="lg" full-width></plus-input>

      <div class="flex w-full flex-col gap-6 md:flex-row md:gap-5">
        <div class="min-w-px flex-1">
          <plus-input id="add-card-details-1-expiration" label="Expiration Date *" placeholder="Expiration Date" autocomplete="cc-exp" size="lg" full-width></plus-input>
        </div>

        <div class="w-full md:w-52">
          <plus-input id="add-card-details-1-cvv" label="CVV *" placeholder="***" autocomplete="cc-csc" inputmode="numeric" maxlength="4" size="lg" full-width></plus-input>
        </div>
      </div>
    </div>

    <plus-button kind="filled" status="primary" size="lg" type="button" class="w-full sm:w-52">Save Card</plus-button>
  </form>
</section>