{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-dashboard np-subpage-container">
  <div class="np-flex-center">
    <div class="main-courses">
      <div class="main-courses-headline">
        <div class="main-courses-headline-title">
          Our Most Popular Courses
        </div>
        <div class="main-courses-headline-subtitle">
          10,000+ unique online course list designs
        </div>
      </div>
      {% include 'dashboard_filter' %}
      <div class="container">
        <div class="main-courses-list row">
          {% for course in courses.enrolled %}
            {% include 'cards_course_dashboard' with course %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</main>
{% include "footer" %}


<style>
  .np-main.np-dashboard {
    background: white;
  }
  .main-courses-headline {
    text-align: center;
    margin-bottom: 50px;
  }
  .main-courses-headline-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: rgb(86, 49, 80);
  }
  .main-courses-headline-subtitle {
    font-size: 0.9rem;
    margin-top: 10px;
    font-weight: 400;
    color: rgb(79, 84, 123);
  }
</style>