{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<main class="np-main np-catalog np-subpage-container np-max-width" id="videos">
  <div class="np-catalog-header-wrapper">
    <div class="np-catalog-header">
      <div class="np-resource-title" style="margin-bottom:32px;">Spark Driver Media</div>
    </div>
  </div>
  {% if courses.in_catalog.any? %}
      <div class="np-catalog-courses row row-with-thumbnails">
    {% for course in courses.in_catalog %}
      {% for category in course.categories %}
        {% if category.name == "Videos" %}
          <div class="col-xs-12 col-md-6 col-lg-3 np-stretch-content">
            {% include "cards_video" with course %}
          </div>
        {% endif %}
      {% endfor %}
    {% endfor %}
  </div>
  {% endif %}
</main>
{% include "footer" %}

<style>
  #videos .np-card {
    padding-right:1rem;
    padding-left:1rem;
  }
</style>