<main class="np-main np-homepage"style="margin-bottom: 0; background-image: url('{{ homepage.artwork_url }}');">

{% include "banner" %}
{% include "header" %}
  <div class="np-homepage-hero" style="padding: 80px;">
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline" style="padding-top: 100px;">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline" style="margin-top: 50px;">
        {{ homepage.subheadline }}
      </div>
    </div>
  </div>
  <div class="np-homepage-featured np-max-width" style="margin-top: 100px; margin-bottom: 50px;">
    <div class="np-homepage-featured-text">
    </div>
    {% if learning_paths.available.any? %}
      <div class="np-homepage-featured-courses row">
        {% for learning_path in learning_paths.available %}
          {% for lpcat in learning_path.categories %}
            {% if lpcat.name == "Default" %}
              <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
                {% include "cards_learning_path" with learning_path %}
              </div>
            {% endif %}
         {% endfor %}   
        {% endfor %}
      </div>
    {% else %}
      <div class="np-homepage-featured-empty">
        <div class="np-zero-state-text">
          {% t .empty, key: current_school.course_vocabulary %}
        </div>
        <img
          class="np-zero-state-courses"
          alt="{% t .empty, key: current_school.course_vocabulary %}"
        />
      </div>
    {% endif %}
  </div>
  {% include "footer" %}
</main>

