<header role="banner" class="container-fluid nopads nopads mb-5">
  <div class="card index-9">
    <div class="card-body card--shadow">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 align-self-center">
            <figure class="m-0">
              <img src="{{img_src}}/logo-velke.svg" alt="logo společnosti Moneta">
            </figure>
          </div>
          <div class="col-lg-6 align-self-center">
            <h1 class="text-center h4 pb-0">Kreditní karta</h1>
          </div>
          <div class="col-lg-3 align-self-center text-right">
            <h4 class="h4 pb-0"> <i class="icon icon--phone"></i> 224 444 555</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <main class="card card-body card--shadow p-5" role="main">
        <h4 class="h4 pb-4">Vyberte si prosim svou odmenu</h4>
        <div class="row">
          <div class="col-lg-4">
            <label class="custom-control custom-radio tile-choose custom-control-inline HOUSE">
                <!-- radio -->
                <p class="text-right"> <strong> 5% </strong></p>
                <input id="" name="name" type="radio" class="custom-control-input">
                <span class="custom-control-indicator hidden"></span>
                <span class="custom-control-description"> <p class="mt-4 mb-0"> <strong> Dům, hobby a zahrada </strong> </p> </span>

              <!-- endif radio -->
            </label>
          </div>
          <div class="col-lg-4">
            <label class="custom-control custom-radio tile-choose custom-control-inline ELECTRONICS">
                <!-- radio -->
                <p class="text-right"> <strong> 5% </strong></p>
                <input id="" name="name" type="radio" class="custom-control-input">
                <span class="custom-control-indicator hidden"></span>
                <span class="custom-control-description"> <p class="mt-4 mb-0"> <strong> Elektronika </strong></span>

              <!-- endif radio -->
            </label>
          </div>
          <div class="col-lg-4">
            <label class="custom-control custom-radio tile-choose custom-control-inline SPORT">
                <!-- radio -->
                <p class="text-right"> <strong> 5% </strong></p>
                <input id="" name="name" type="radio" class="custom-control-input">
                <span class="custom-control-indicator hidden"></span>
                <span class="custom-control-description"> <p class="mt-4 mb-0"> <strong> Cestování a sport </strong></p></span>

              <!-- endif radio -->
            </label>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col-lg-4">
            <label class="custom-control custom-radio tile-choose custom-control-inline RESTAURANT">
                <!-- radio -->
                <p class="text-right"> <strong> 5% </strong></p>
                <input id="" name="name" type="radio" class="custom-control-input">
                <span class="custom-control-indicator hidden"></span>
                <span class="custom-control-description"> <p class="mt-4 mb-0"> <strong> Restaurace a kultura </strong></p></span>

              <!-- endif radio -->
            </label>
          </div>
          <div class="col-lg-4">
            <label class="custom-control custom-radio tile-choose custom-control-inline PET">
                <!-- radio -->
                <p class="text-right"> <strong> 5% </strong></p>
                <input id="" name="name" type="radio" class="custom-control-input">
                <span class="custom-control-indicator hidden"></span>
                <span class="custom-control-description"> <p class="mt-4 mb-0"> <strong> Mazlíčci </strong> </p> </span>

              <!-- endif radio -->
            </label>
          </div>
          <div class="col-lg-4">

          </div>
        </div>
      </main>
    </div>
    <div class="col-lg-4">
      <aside class="pl-5">
        <h4 class="h4">Co Vás čeká?</h4>
          <ul class="stepper mt-2 pl-0">
          <li class="stepper-item row">
            <div class="col-2">
              <div class="badge badge-primary badge-rounded badge-stepper stepper-done">
                <i class="icon icon--old-tick"></i>
              </div>
            </div>
            <div class="col-10">
              <div class="stepper-text">Nastavení kreditní karty. Výše úvěrového rámce <strong>30 000 Kč</strong> </div>
            </div>
          </li>
          <li class="stepper-item row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">2</span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--mid row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper--mid-step"></span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--mid row stepper-item--disabled">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper--mid-step badge-stepper--mid-step__disabled"></span>
            </div>
            <div class="col-10">
              <div class="stepper-text"> text </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--disabled row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">3</span>
            </div>
            <div class="col-10">
              <div class="stepper-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </div>
            </div>
          </li>
          <li class="stepper-item stepper-item--disabled row">
            <div class="col-2">
              <span class="badge badge-primary badge-rounded badge-stepper">4</span>
            </div>
            <div class="col-10">
              <div class="stepper-text">
                Peníze
              </div>
            </div>
          </li>
        </ul>
      </aside>
    </div>
  </div>
</div>
