{% include "header" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
  {% include "course_version_outdated_alert", courses: courses.in_catalog %}
  <div class="np-catalog-header-wrapper">
    <div class="np-catalog-header">
      <div>
        <div class="np-resource-title">{{ catalog.headline }}</div>
        <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
      </div>
      {% include 'catalog_filters' %}
    </div>
    {% capture label %}{% t shared.filters.by_category %}{% endcapture %}
  </div>
  {% include "courses_catalog" %}
</main>
{% include "footer" %}

<style>
  @media (min-width: 768px) {
    .np-catalog-header {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
  }
</style>
