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

    </div>
</div>
