{% if pairing.typefaces[0] == page.name %}
  {% assign paired_typeface = site.typefaces | where: 'name', pairing.typefaces[1] | first %}
{% else %}
  {% assign paired_typeface = site.typefaces | where: 'name', pairing.typefaces[0] | first %}
{% endif %}

<div class='sample pairing {{ pairing.name | slugify }}-sample gr6 gc6'>
  <div class='text'>{{ pairing.content }}</div>
  <div class='meta {% if pairing.sample_shade == 'light' %}dark{% endif %}'>
    {% if page.layout == 'detail' %}
      <p>Paired with <a href='{{ paired_typeface.url }}'>{{ paired_typeface.name }}</a></p>
    {% else %}
      <p class='pairing-list'>
        {% for typeface in pairing.typefaces %}
          <a href='/{{ typeface | slugify }}/'>{{ typeface }}</a>
        {% endfor %}
      </p>
    {% endif %}
  </div>
</div>