<div class="np-max-width badges">
  <div class="row np-card-container badges-container ">
    {% assign number_of_badges = 0 %}
    {% assign max_number_of_badges = 5 %}
    {% for course in courses.enrolled %}
      {% if number_of_badges < max_number_of_badges %}
        {% if course.completed? %}
            <div class="col-lg-5th">
              <img src="{{course.properties.course_badge}}" alt="">
            </div>
            {% assign number_of_badges = number_of_badges | plus: 1 %}
        {% endif %}
      {% endif %}
    {% endfor %}

    {% comment %} <div class="col-xs-12 col-sm-6 col-md-4 col-lg-5th badges-item"> {% endcomment %}
    {% comment %}   <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/G2/G2_for_sales_badge.png" alt=""> {% endcomment %}
    {% comment %} </div> {% endcomment %}
    {% comment %} <div class="col-xs-12 col-sm-6 col-md-4 col-lg-5th badges-item"> {% endcomment %}
    {% comment %}   <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/G2/G2_for_sales_badge.png" alt=""> {% endcomment %}
    {% comment %} </div> {% endcomment %}
    {% comment %} <div class="col-xs-12 col-sm-6 col-md-4 col-lg-5th badges-item"> {% endcomment %}
    {% comment %}   <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/G2/G2_for_sales_badge.png" alt=""> {% endcomment %}
    {% comment %} </div> {% endcomment %}
    {% comment %} <div class="col-xs-12 col-sm-6 col-md-4 col-lg-5th badges-item"> {% endcomment %}
    {% comment %}   <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/G2/G2_for_sales_badge.png" alt=""> {% endcomment %}
    {% comment %} </div> {% endcomment %}
    {% comment %} <div class="col-xs-12 col-sm-6 col-md-4 col-lg-5th badges-item"> {% endcomment %}
    {% comment %}   <img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/G2/G2_for_sales_badge.png" alt=""> {% endcomment %}
    {% comment %} </div> {% endcomment %}
  </div>
</div>

{% if number_of_badges == 0 %}
  <style>
    .badges {
      display: none !important;
    }
  </style>
{% endif %}

<style>
  .badges {
    padding: 0 50px;
    max-width: 1024px;
  }

  .badges-container {
    background: transparent;
    box-shadow: none !important;
    padding: 20px 0 10px;
    flex-direction: row;
    justify-content: center;
    z-index: 0;
  }

  .badges-item {
    display: flex;
    justify-content: center;
  }

  .badges img {
    margin-bottom: 10px;
    width: 140px;
  }
</style>
