{% include 'includes/head.twig' with {'pageTitle': 'Nations'} %}

{% include 'includes/hero.twig' %}

{% include 'includes/nav.twig' with {'page': 'nations'} %}

<main class="pageContent container">
  <h1>Nations</h1>
  <div class="cards">
    {% for nation in nations %}
      <a class="card transitionEnabled" href="/nation/{{ nation.short }}">
        <h1>{{ nation.name }}</h1>
        <p>{{ nation.short_description }}</p>
        <img class="icon" src="{{ nation.flag }}">
      </a>
    {% endfor %}
  </div>

</main>

{% include 'includes/footer.twig' %}
{% include 'includes/foot.twig' %}