{% comment %} skip-auth {% endcomment %}
{% include "header" %}
<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>
{% 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>