<div class="courses-list np-hidden">
  <div class="np-resource-title courses-list-title">
    Library
  </div>
  <div class="row courses-wrapper">
    <div class="courses-filter-wrapper col-12 col-md-3">
      {% include "courses_filter" %}
    </div>
    <div class="courses-wrapper row row-with-thumbnails col-12 col-md-9">
      {% for course in courses.in_catalog %}
        <div class="col-xs-12 col-sm-6 col-xl-4 np-stretch-content role-hidden" course-category="{{ course.categories |  map: 'id' |  join: ' ' }}" course-role="{{ course.properties.role }}">
          {% include "cards_course" %}
        </div>
      {% endfor %}
      <div class="zero-state np-hidden">
        {% include "courses_zero_state", message: "No courses matching criteria" %}
      </div>
    </div>
  </div>
</div>
