@use 'sprucecss/scss/spruce' as *;

.payment-card {
  @include a11y-card-link('.payment-card .form-check', true);
  align-items: center;
  background-color: color('background');
  border: 1px solid color('border');
  border-radius: config('border-radius-lg', $display);
  color: color('heading');
  display: flex;
  gap: spacer('m');
  padding: spacer-clamp('s', 'm');
  text-decoration: none;

  &__caption {
    @include layout-stack('xs');
  }

  &__title {
    font-size: font-size('h4');
  }

  &__logo {
    block-size: 1.75rem;
    inline-size: auto;
  }
}

<div class="payment-card">
    <label class="form-check">
        <input class="form-check__control" type="radio" name="payment-type" value="stripe" checked="checked" aria-label="Stripe"/>
    </label>
    <div class="payment-card__caption"><img class="payment-card__logo" src="/img/ui/stripe-logo.svg" alt="Stripe" height="67" width="28"/>
        <p class="payment-card__description">You will be redirect to Stripe to complete the payment.</p>
    </div>
</div>
<div class="payment-card">
    <label class="form-check">
        <input class="form-check__control" type="radio" name="payment-type" value="paypal" aria-label="PayPal"/>
    </label>
    <div class="payment-card__caption"><img class="payment-card__logo" src="/img/ui/paypal-logo.svg" alt="Stripe" height="104" width="28"/>
        <p class="payment-card__description">You will be redirect to PayPal to complete the payment.</p>
    </div>
</div>