{% if courses.enrolled.any? %}
  <div class="row row-with-thumbnails">
    {% assign enrolled_courses_alphabetical = courses.enrolled | sort: "name" %}
    {% for course in enrolled_courses_alphabetical %}

      {% assign course_progress = "" %}
      {% if course.progress == 100 %}
        {% assign course_progress = "completed" %}
      {% elsif course.progress < 100 and course.progress > 0 %}
        {% assign course_progress = "in-progress" %}
      {% else %}
        {% assign course_progress = "not-started" %}
      {% endif %}

       {% assign cat_name = "" %}
      {% for category in course.categories limit: 1 %}
        {% assign cat_name = category.name %}
      {% endfor %}
      <div class="{{ class }}" data-progress="{{course_progress}}" data-category="{{cat_name}}">
        {% include "cards_course" with course %}
      </div>
    {% endfor %}
  </div>
{% else %}
  {% capture message %}
    {% t shared.zero_state.courses.index,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}
  {% include "courses_zero_state", message: message %}
{% endif %}

<style>

@media (min-width:768px) {
  .np-card.course-card {
    padding: 0 0 100px;
    height:100%;
  }
}

</style>