{% if course.properties.skip_course_cover_page or course.properties.is_article_course %}
  {% if course.enrolled? %}
    <script>window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")</script>
  {% else %}
    <script>window.location.replace("{% route course_enrollment, code: course.enrollment_code %}")</script>
  {% endif %}
{% else %}
  {% include "header" %}
  <main class="np-main np-max-width np-page-container">
    <div class="np-hidden-mobile" id="course-desktop">
      {% include "course_desktop_view" %}
    </div>
    <div class="np-hidden-desktop" id="course-mobile">
      {% include "course_mobile_view" %}
    </div>
  </main>
  {% include "footer" %}
{% endif %}

<style>
  .np-header {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .np-flex {
    flex-wrap:wrap;
  }

  .np-content-categories-content-item {
    margin-bottom:12px;
  }
  
  .course-image-wrapper {
    position:relative;
  }

  .course-title {
    position:absolute;
    color:#fff;
    font-weight:700;
    top:16px;
    left:16px;
    padding-right:16px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    font-size:24px;
    line-height:32px;
  }

  @media (min-width:768px) {
    .course-title {
      font-size: 32px;
      line-height: 40px;
    }
  }

  @media (min-width:1200px) {
    .course-title {
      font-size: 40px;
      line-height: 48px;
    }
  }
</style>