{% if courses.in_catalog.any? %}
  <div class="np-catalog-courses row row-with-thumbnails" id="courses">
    {% for course in courses.in_catalog %}
      <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
        {% include "cards_course" with course %}
      </div>
    {% endfor %}
  </div>
{% else %}
  {% capture message %}
    {% t shared.zero_state.courses.catalog,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}
  {% include "courses_zero_state", message: message %}
{% endif %}

<style>
  .np-catalog-courses {
    width: 70%;
    margin: 40px auto;
  }
  .np-card {
    padding: 20px;
  }
</style>