{{ layout 'default.vto' }}
  <main class="mi-main mi-cards">
    <div class="mi-logo">
      <picture>
        <source media="(max-width: 500px)" srcset="/img/logo-500.jpg" />
        <source media="(min-width: 501px) and (max-width: 700px)" srcset="/img/logo-700.jpg" />
        <source media="(min-width: 701px) and (max-width: 799px)" srcset="/img/logo-1000.jpg" />
        <source media="(min-width: 800px) and (max-width: 1400)" srcset="/img/logo-500.jpg" />
        <source media="(min-width: 1401px) and (max-width: 1899px)" srcset="/img/logo-700.jpg" />
        <source media="(min-width: 1900px)" srcset="/img/logo-1000.jpg" />
        <img class="mi-logo--img" src="/img/logo-500.jpg" alt="MiOM Logo" />
      </picture>
    </div>

    <div class="mi-tagline">
      {{ tagline |> md |> safe }}
    </div>

    {{ for card of cards }}
      <a
        class="mi-card"
        href="{{ card.link }}"
      >
        <picture>
          <source media="(max-width: 500px)" srcset="/img/home-{{ card.image.url }}-500.jpg" />
          <source media="(min-width: 501px)" srcset="/img/home-{{ card.image.url }}-700.jpg" />
          <img
            class="mi-card--background"
            src="/img/home-{{ card.image.url }}-500.jpg"
            alt="{{ card.image.alt }}"
          />
        </picture>
        <div class="mi-card--text">{{ card.text }}</div>
      </a>
    {{ /for }}

  </main>
  <div class="mi-page-filler"></div>
{{ /layout }}