{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}

<div class="hero-homepage">
  <div class="np-max-width">
  <div class="hero-text">Course Catalog</div>
  <div class="hero-subheading">Get the skills and knowledge you need at the moment you need them. Explore our full course catalog.</div>
  </div>
</div>
<main class="np-main np-catalog np-max-width catalog-container">
  <div class="filter-container">
    {% include 'filters_catalog' %}
  </div>
  <div class="catalog-content-wrapper">
    <div class="catalog-courses-container">
      {% include "courses_catalog" %}
    </div>
  </div>
</main>
{% include "footer" %}

<style>
.catalog-container {
  display: flex;
  gap: 20px;
  padding: 5% 20px;
}
.filter-container {
  width: 25%;
  margin: 10px;
}
.catalog-content-wrapper {
  display: flex;
  gap: 20px;
  width: 75%;
}
.filters-container {
  width: 20%;
  border: 3px solid #002e6e;
  border-radius: 25px;
}
.catalog-courses-container {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .catalog-container {
    flex-direction: column;
    align-items: center;
  }
  .filter-container {
    width: 100%;
  }
  .catalog-content-wrapper {
    width: 100%;
  }
}


</style>