{% 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>
  body{
    background: url('https://s3.amazonaws.com/static.northpass.com/skan_ai/background.png');
    background-size: cover;
  }

  .np-page-container{
    padding: 0 !important;
  }

  @media screen and (min-width: 768px){
    .np-page-container{
      margin: calc(8.25rem + 75px) auto 8.25rem;
    }
  }
</style>

<script>
  if (window.location.pathname.includes('/learning_paths')) {
    addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('h3.np-card-heading').forEach(x => {
        if (x.innerText.toLowerCase().includes('course')) {
          x.innerText = x.innerText.replaceAll('course', 'certificate').replaceAll('Course', 'Certificate');
        }
      })
    })
  }
</script>