<div class="np-card-container np-card-padding-large">
  {% include "course_banner" %}
  <div class="np-top-cta">
    {% include "course_progress_and_cta" %}
  </div>
</div>

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

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

<style>
  @media only screen and (max-width: 630px) {
    .np-course-info.np-course-banner-info {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 90%;
      height: 80%;
    }
  }
  @media only screen and (max-width: 360px) {
    #hideable {
      display: none;
    }
    .np-course-details {
      justify-content: space-between;
      color: white;
    }
    .np-course-info.np-course-banner-info {
      left: 0;
      margin: auto 1rem;
    }
    .np-course-banner .np-course-title {
      margin-bottom: 2.5rem;
    }
  }
</style>