{% if courses.in_catalog.any? %}
  <div class="np-catalog-courses row row-with-thumbnails">
    {% 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-stretch-content:nth-child(n+2) {
    margin-top: 24px;
  }

  @media (min-width: 768px) {
    .np-stretch-content {
      margin-top: 24px;
    }
  }
</style>