<footer class="np-footer">
  <div class="np-footer-top">
    {% if website_footer.show_navigation_links? %}
      <div class="np-footer-navigation">
        <ul class="np-footer-navigation-list">
          {% for website_navigation in navigations.footer_navigations %}
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link np-button-color"
                href="{{ website_navigation.path }}"
                {% if website_navigation.external? %} target="_blank" {% endif %}
              >
                {{ website_navigation.name }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
    {% if current_school.logo_url %}
      <h2 class="np-footer-logo">
        <a href="{% route home %}">
          <img
            alt="{{ current_school.name }}"
            class="np-footer-logo-image"
            src="{{ current_school.logo_url }}"
          />
        </a>
      </h2>
    {% else %}
      <div class="np-school-name np-header-font-color">
        {{ current_school.name }}
      </div>
    {% endif %}
  </div>
</footer>

<style>
  .np-footer-navigation-list {
    flex-wrap: wrap;
  }
  .np-footer {
    padding: 0.5rem 4% 0;
    border-top: 1px solid #ededed !important;
  }
  .np-footer-navigation-link {
    padding: 0 1.25rem 1.25rem;
  }
  .np-footer-navigation-link:hover {
    color: #4b2346;
  }
  .np-powered-by {
    padding-bottom: 0.75rem;
    background: white;
  }
  @media screen and (min-width: 768px) {
    .np-footer-navigation {
      margin: 0 -1.25rem;
    }
    .np-footer-logo {
      margin-right: 0;
    }
  }

  @media screen and (max-width: 768px) {
    .np-footer-navigation-link {
      padding: 0 1.25rem;
    }
  }
</style>