{% comment %} skip-auth {% endcomment %}
{% include "header" %}

{% for learning_path in learning_paths.available %}
  {% if learning_path.id == "0e9846a6-4427-44a0-b49e-70ba3616ec7f" %}
    <div class="cover-page-hero learning-path-hero">
      <div class="np-max-width np-page-container">
        <div class="row">
          <div class="col-xs-12 col-sm-9">
            <h1 class="header-1">{{learning_path.name}}</h1>
            <div class="eyebrow-lg fw-semibold course-vocab">{% t shared.learning_path.title %}</div>
          </div>
        </div>
      </div>
    </div>
    <main class="np-main np-max-width np-page-container cover-page">
      <div class="np-hidden-mobile" id="learning-path-desktop">
        {% include "learning_path_desktop_view" %}
      </div>
      <div class="np-hidden-desktop" id="learning-path-mobile">
        {% include "learning_path_mobile_view" %}
      </div>
    </main>
  {% endif %}
{% endfor %}

{% include "footer" %}

<style>
.np-learning-path-outline-item {
  flex-direction: row;
}

.np-learning-path-outline-course-image-wrapper {
  width:25%;
  position: relative;
  overflow: hidden;
}

.np-learning-path-outline-course-image-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 100%;
  width: auto;
}

.np-learning-path-outline-content {
  margin:0;
}

.np-learning-path-card-info {
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom:32px;
}

.np-learning-path-outline-content .header-5 {
  margin-bottom:8px;
}
</style>