<div class="checkout-widget">
  <h3 class="heading-3">Payment</h3>
  <ul class="checkout-widget__details">
    <li class="checkout-widget__details__item">
      <span class="checkout-widget__detail-name">Card type:</span>
      <span class="checkout-widget__detail-value_payment">Visa</span>
    </li>
    <li  class="checkout-widget__details__item">
      <span class="checkout-widget__detail-name">Card number:</span>
      <span class="checkout-widget__detail-value_payment">41114111*****111</span>
    </li>
    <li class="checkout-widget__details__item">
      <span class="checkout-widget__detail-name">Expiry date:</span>
      <span class="checkout-widget__detail-value_payment">06 / 2026</span>
    </li>
    <li class="checkout-widget__details__item">
      <span class="checkout-widget__detail-block">Name on card:</span>
      <span class="checkout-widget__detail-block checkout-widget__detail-value_no-float">Konstantin Konstantinopolsky</span>
    </li>
    <li class="checkout-widget__details__item">
      <span class="checkout-widget__detail-block">Billing address:</span>
      <span class="checkout-widget__detail-block checkout-widget__detail-value_no-float">
          365 Bleepblop road<br/>
          Narnia<br/>
          NA6 1IA
        </span>
    </li>
  </ul>
    <div class="checkout-widget__card-save">
        <i class="fas fa-check-circle success"></i>
        <h3 class="heading-3 text-center">Card saved successfully</h3>
    </div>
    <div class="checkout-widget__card-save">
        <i class="fas fa-times-circle error"></i>
        <h3 class="heading-3 text-center">Oops! Something went wrong...</h3>
    </div>
    <a href="#" class="btn btn-primary w-100 mt-3">
        <span class="btn__text">Save this card</span>
    </a>
</div>