{% load wagtailimages_tags %}
{# Uses value instead of block.value because it is also used #}
{# to display Person items #}
<div class="fr-container fr-my-3w">
  <div class="fr-grid-row fr-grid-row--gutters">
    <div class="fr-card fr-card--horizontal fr-col-12 fr-col-md-6">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h3 class="fr-card__title">{{ value.name }}</h3>
          <p class="fr-card__desc">{{ value.role }} – {{ value.organization }}</p>
          {% if value.contact_info %}
            <div class="fr-card__end">
              <p class="fr-card__detail">{{ value.contact_info }}</p>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="cmsfr-author_card__header fr-card__header">
        <div class="fr-card__img">
          {% image value.image fill-200x200 as contact_image %}
          <img class="fr-responsive-img cmsfr-author-img"
               src="{{ contact_image.url }}"
               width="4.5em"
               height="4.5em"
               alt="" />
        </div>
      </div>
    </div>
  </div>
</div>
