{% extends 'layouts/default.njk' %}

{% block main %}
  <main class="mi-main mi-cards">
    <div class="mi-logo">
      <img src="/img/logo.jpg" class="mi-logo--img" />
    </div>

    <div class="mi-tagline">
      <h1>Hi! Wir sind das MiOM</h1>
      <p>Wir schaffen bezahlbaren Raum in dem wir gemeinsam interdisziplinär arbeiten und experimentieren.</p>
    </div>

    {% for card in cards %}
      <a
        class="mi-card"
        href="{{ card.link }}"
      >
        <img
          class="mi-card--background"
          src="{{ card.image.url }}"
          alt="{{ card.image.alt }}"
        />
        <div class="mi-card--text">{{ card.text }}</div>
      </a>
    {% endfor %}
  </main>
{% endblock %}