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

<style>

@media (min-width:768px) {

  body {
    background-color:#06083c;
  }

  #course-desktop .np-card-container,
  #course-mobile .np-card-container {
    border-radius:30px;
  }

  .np-main.np-page-container {
    margin-top:200px;
  }

  .np-top-title,
  .np-top-button,
  .np-top-cta-progress-title,
  .np-course-outline-content-activity-link {
    font-family: 'Hind', Verdana, sans-serif;
  }

  .np-top-button,
  .np-top-image {
    border-radius:30px;
  }

  .np-top-cta {
    padding: 1.25rem 0;
    background: transparent;
  }
}
</style>