{% include "header" %}
{%- comment -%} {% include "course_version_outdated_alert", courses: courses.featured %} {%- endcomment -%}
<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content col-xs-12 row">
      <div class="np-homepage-hero-texts col-xs-12 col-md-6">
        <div class="np-homepage-hero-headline np-homepage-headline np-header-font-color">
          {{ homepage.headline }}
        </div>
        <div class="np-homepage-hero-subheadline np-homepage-subheadline np-header-font-color">
          {{ homepage.subheadline }}
        </div>
      </div>
      <div class="np-homepage-hero-collage col-xs-12 col-md-6">
        <img id="skan_metrics_img" alt="skan_metrics" class="hero-skan-image" src="https://s3.amazonaws.com/static.northpass.com/skan_ai/Dashboard+Image.png">
        <img id="skan_three_boxes_img" alt="skan_three_boxes" class="hero-skan-image" src="https://s3.amazonaws.com/static.northpass.com/skan_ai/Three+Squares.png">
        <img id="skan_process_map_img" alt="skan_process_map" class="hero-skan-image" src="https://s3.amazonaws.com/static.northpass.com/skan_ai/Process+Map+Image.png">
      </div>
    </div>
  </div>
  <div class="np-homepage-featured np-max-width">
    <div class="np-learning-paths-main">
      <div class="np-resource-title">
        Certifications
      </div>
      <div class="np-resource-subtitle">
        Explore curated sets of courses for a tailored learning experience
      </div>
      {% include "learning_paths_index", items: learning_paths.available %}
    </div>
  </div>
</main>
{% include "footer" %}

<!-- STYLES REFERRING TO THE HOMEPAGE AS A WHOLE -->
<style>
  .np-homepage{
    margin-bottom: 0;
    padding-bottom: 4rem;
  }

  .np-homepage-hero-image{
    object-fit: cover;
  }
  
  .np-homepage-hero-content{
    width: 100%;
    align-items: center;
  }

  .np-homepage-hero-headline,
  .np-homepage-hero-subheadline{
    color: #ffffff;
  }

  .np-homepage-hero-collage{
    position: relative;
  }

  #skan_metrics_img{
    position: absolute;
    z-index: 0;
    max-height: 185px;
    bottom: 4rem;
    right: 6rem;
  }

  #skan_three_boxes_img{
    position: absolute;
    max-height: 400px;
    padding-right: 22.5%;
    z-index: 1;
    top: -12rem;
    right: 6rem;
  }

  #skan_process_map_img{
    position: absolute;
    z-index: 0;
    max-height: 225px;
    right: 23rem;
    top: 2rem;
  } 

  @media screen and (min-width: 768px){
    .np-homepage{
      padding-top: 75px;
    }

    .np-homepage-hero-image{
      max-height: 550px;
    }

    .np-homepage-featured{
      width: 90%;
    }

    .np-homepage-hero-headline{
      font-size: 5.5rem !important;
      text-align: left;
      padding-left: 5%;
    }
  }
</style>