{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-max-width np-page-container">
  <div class="np-hidden-mobile" id="learning-path-desktop">
    {% include "learning_path_desktop_view" %}
  </div>
  <div class="np-hidden-desktop" id="learning-path-mobile">
    {% include "learning_path_mobile_view" %}
  </div>
</main>
{% include "footer" %}

<style>
  .np-top-image, .np-learning-path-outline-course-image {
    border-radius: 8px;
  }
  @media only screen and (min-width: 768px) {
    .np-top-image, .np-learning-path-outline-course-image {
      border-radius: 8px 8px 0 0;
    }
    body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "nav" "main" "footer" "powered";
    grid-template-rows: 120px 50px 1fr 160px 60px;
    }
    nav {
      grid-area: nav;
      margin-bottom: 17px;
    }
    header {
      grid-area: header;
    }
    main {
      grid-area: main;
      margin-top: 0 !important;
    }
    footer {
      grid-area: footer;
    }
    .np-powered-by {
      grid-area: powered;
    }
  }
  .np-top-cta {
    border-radius: 8px;
  }
  .np-card-container, .np-card-container-training-session {
    border-radius: 8px;
  }
  .np-card-content {
    border-radius: 8px;
  }
</style>