<div class="np-card-container course-mobile-header">

  <img
    src="{{ course.image_url }}"
    class="np-top-image np-hidden-desktop"
    alt="{{ course.name }}"
  />

  <div class="course-description np-card-padding">
    {% include "course_description" %}
  </div>
</div>

  <div class="np-top-cta">
    {% include "course_progress_and_cta" %}
  </div>

  <div class="np-card-padding np-card-spacing" style="margin:0;">
    {% include "course_outline" %}
  </div>

{% comment %} {% if course.progress == 0 %}
  <div class="np-card-container np-card-padding np-card-spacing">
    {% include "course_description" %}
  </div>
  <div class="np-card-container np-card-padding np-card-spacing">
    {% include "course_outline" %}
  </div>
{% else %}
  <div class="np-card-container np-card-padding np-card-spacing">
    {% include "course_outline" %}
  </div>
  <div class="np-card-container np-card-padding np-card-spacing">
    {% include "course_description" %}
  </div>
{% endif %} {% endcomment %}

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

{% 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 %}
