{% set image = page.media.images|first %}
<div class="card">
  <a href="{{ page.url }}">

  {% if image %}
    <div class="card-image">
      {{ image.derivatives(300,700,200).sizes('(max-width:26em) 100vw, 50vw').html('','articles') }}
    </div>
  {% endif %}

  <div class="wrapper-content">
    <div class="card-title">
      {% include 'partials/blog/title.html.twig' with {title_level: 'h5'} %}
    </div>
    <div class="wrapper-info">
      <div class="date">
        Publié {% include 'partials/blog/date.html.twig' %} |
      </div>
      {% if page.taxonomy.category %}
        {% for category in page.taxonomy.category %}
          <span class="cat">
            {{ category }}
          </span>
        {% endfor %}
      {% endif %}
    </div>

    <div class="card-content">
      {% if page.summary != page.content %}
          {{ page.summary(500) }}
      {% else %}
          {{ page.content|raw }}
      {% endif %}
    </div>

    <div class="readmore">
      Lire l'article
    </div>
  </div>
</a>
</div>