{% if mentions['in-reply-to'].size > 0 %}
  <h2>Comments</h2>
  <div class="interaction comments">
    {% for mention in mentions['in-reply-to'] %}
      <div class="comment__wrapper flex--centered">
        <div class="comment__wrapper--interior flex--centered">
          <a href={{mention.url}}>
            <div class="avatar__wrapper flex--centered">
            {% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
            {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
            {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %}
            </div>
          </a>
          <div class="comment">
            <a href={{mention.url}}>
              <p>{{ mention.content.text | webmentionsSanitizeComments }}</p>
              <time>{{ mention.published | isoDateOnly }}</time>
            </a>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}