<div class="np-card-container">
  <div class="row np-course-content np-card-padding-dynamic" style='background: #00283D;'>
    {% include "course_banner" %}
    <div class="col-xs-12 col-sm-6">
      {% include "course_description" %}

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

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

      {% if course.events.any? %}
        <div class="np-card-content-divider">
          {% include "course_events" %}
        </div>
      {% endif %}
    </div>
    <div class="np-grid-spacing col-xs-12 col-sm-6">
      <div class="np-top-cta">
        {% include "course_progress_and_cta" %}
      </div>
      {% include "course_outline" %}
    </div>
  </div>
</div>

<style>
  @media only screen and (min-width: 768px) {
    body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "nav" "main" "footer" "powered";
    grid-template-rows: 120px 50px 1fr 160px 60px;
    }
    header {
      grid-area: header;
    }
    nav {
      grid-area: nav;
      margin-bottom: 17px;
    }
    main {
      grid-area: main;
      margin-top: 0 !important;
    }
    footer {
      grid-area: footer;
    }
    .np-powered-by {
      grid-area: powered;
    }
  }
</style>