<div class="np-card-container np-card-padding-large">

  <div class='np-mobile-course-header-wrapper'>
   
    <div class='np-mobile-course-header'>
      <div class='np-course-header-name'>
        {{ course.name }}
      </div>
      <div class='np-course-header-right-short'>
          {{ course.full_description }}
      </div>
      <div class='np-course-header-button'>
        {% include "course_progress_and_cta" %}
      </div>
    </div>
     <img
    src="{{ course.image_url }}"
    class="np-top-image np-top-image-spacing"
    alt="{{ course.name }}"
    />
  </div>
</div>

{% if course.progress == 0 %}
 
  <div class="np-card-container np-card-padding">
    {% comment %} {% include "course_outline" %} {% endcomment %}
    <div class='np-course-outline-mobile'>
      <div class='np-course-bottom-left-title'>
        Curriculum
      </div>
      <div class='np-course-bottom-left-outline'>
        {% for section in course.sections %}
          <div class='np-course-bottom-left-outline-section'>
            {{ section.name }}
          </div>
          {% for activity in section.activities %}
            <div class='np-course-bottom-left-outline-activity'>
              {{ activity.title }}
            </div>
          {% endfor %}
        {% endfor %}
      </div>
    </div>
  </div>
   <div class="np-card-container np-card-padding course-description-mobile">
    {% include "course_description" %}
  </div>
{% else %}
 
  <div class="np-card-container np-card-padding course-description-mobile">
    {% include "course_description" %}
  </div>
   <div class="np-card-container np-card-padding">
    {% comment %} {% include "course_outline" %} {% endcomment %}
    <div class='np-course-outline-mobile'>
      <div class='np-course-bottom-left-title'>
        Curriculum
      </div>
      <div class='np-course-bottom-left-outline'>
        {% for section in course.sections %}
          <div class='np-course-bottom-left-outline-section'>
            {{ section.name }}
          </div>
          {% for activity in section.activities %}
            <div class='np-course-bottom-left-outline-activity'>
              {{ activity.title }}
            </div>
          {% endfor %}
        {% endfor %}
      </div>
    </div>
  </div>
{% endif %}

{% if course.categories.any? %}
  <div class="np-card-container np-card-padding np-card-spacing">
    {% include "course_categories" %}
  </div>
{% endif %}

{% if course.instructors.any? %}
  <div class="np-card-container np-card-padding np-card-spacing">
    {% include "course_instructors" %}
  </div>
{% endif %}

{% if course.events.any? %}
  <div class="np-card-container np-card-padding np-card-spacing">
    {% include "course_events" %}
  </div>
{% endif %}

<style>
  .np-mobile-course-header-wrapper {
    padding-bottom:50px;
    border-bottom: 1px solid #d6d6d6;
  }

    .np-mobile-course-header-wrapper img {
    width:100%;
  }

  .np-mobile-course-header .np-course-header-name {
      font-size: 36px;
      line-height: 42px;
      font-weight:800;
      margin-bottom:25px;
  }

  .np-mobile-course-header .np-course-header-button {
    margin-bottom: 50px;
  }

  .np-mobile-course-header .np-course-header-button .np-button {
    width:auto;
  }

  #course-mobile .np-card-container {
    margin-top:0;
  }

  .course-description-mobile .np-card-heading {
    font-size:24px;
    line-height:24px;
    margin-bottom:8px;
  }

  .course-description-mobile .np-card-text,
  .course-description-mobile .np-card-text p {
    font-size:16px!important;
    line-height:22px!important;
  }
</style>
