{% include "header" %}
<div class="page-container">
  <div class="np-hidden-mobile">
    {% include "sub_navigation" %}
  </div>
  <main class="np-main np-learning-paths np-subpage-container np-max-width">
    <div class="np-learning-paths-main">
      <div class="np-resource-title np-hidden-mobile">
        {% t shared.learning_paths %}
      </div>
      <div class="np-hidden-desktop lp-title">Learning Paths</div>
      <div class="np-resource-subtitle np-hidden-mobile">
        {% t .subtitle %}
      </div>
      <div class="np-hidden-desktop lp-subtitle">Explore curated sets of courses for a tailored learning experience.</div>
      {% include "learning_paths_index", items: learning_paths.available %}
    </div>
  </main>
</div>
{% include "footer" %}

<style>
  @media (max-width: 768px) {
    .np-learning-paths {
    padding: 25px 5% 0;
    }

    .lp-title {
      font-family: F37 Moon;
      font-style: normal;
      font-weight: normal;
      font-size: 36px;
    }

    .lp-subtitle {
      font-family: F37 Moon;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
    }
  }

  @media (min-width: 769px) {
    .np-card-content-description {
      display: block;
      min-height: 0;
    }
  }
</style>