<footer class="np-footer">
  <div class="np-footer-top">
    <div class="copyright">&copy; MATTR, 2023</div>
    <div class="np-footer-navigation">
      <ul class="np-footer-navigation-list">
        {% for website_navigation in navigations.footer_navigations %}
          {% if website_navigation.external? %}
            <li class="np-footer-navigation-item">
              <a class="np-footer-navigation-link" href="{{ website_navigation.path }}" target="_blank">{{ website_navigation.name }}</a>
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>
  </div>
</footer>

<style>
  .np-footer {
    padding: 48px 0 32px;
  }
  .np-footer-top {
    border-top: 1px solid #EBEAEB;
  }

  .np-footer-navigation-list { flex-direction: row;}

  .np-footer-navigation-link { margin: 16px; color:#333132;}

  @media (min-width:768px) {
    .np-footer-navigation-link { margin-right: 0; padding-right:0;}
    .np-footer-navigation-list {padding-right:0!important;}
  }
</style>