{% if item.extras | size: > 0 %}
  {% capture extras %} picture-item--{{ item.extras | join: " picture-item--" }}{% endcapture %}
{% else %}
  {% assign extras = "" %}
{% endif %}
{% assign description = item.description %}
<figure class="col-{{ item.cols[0] }}@xs col-{{ item.cols[1] }}@sm col-{{ item.cols[2] }}@md picture-item{{ extras }}" data-groups='{{ item.groups | jsonify }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
  <div class="picture-item__inner">
    {% if item.type != 'wide' %}
    <div class="aspect aspect--16x9">
      <div class="aspect__inner">
    {% endif %}
        {% if item.type == 'small' or item.type == 'tall' %}
          {% assign src1x = item.images.small %}
          {% assign src2x = item.images.small-2x %}
        {% else %}
          {% assign src1x = item.images.large %}
          {% assign src2x = item.images.large-2x %}
        {% endif %}
        <img src="{{ src1x }}" srcset="{{ src1x }} 1x, {{ src2x }} 2x" alt="{{ item.description }}" />
        <img class="picture-item__blur" src="{{ src1x }}" srcset="{{ src1x }} 1x, {{ src2x }} 2x" alt="" aria-hidden="true" />
    {% if item.type != 'wide' %}
      </div>
    </div>
    {% endif %}
    <div class="picture-item__details">
      <figcaption class="picture-item__title"><a href="{{ item.source }}" target="_blank" rel="noopener">{{ item.title }}</a></figcaption>
      <p class="picture-item__tags hidden@xs">{{ item.groups | join: ', ' }}</p>
    </div>
    {% if item.type == 'large' or item.type == 'tall' %}
      <p class="picture-item__description">{{ item.description }}</p>
    {% endif %}
  </div>
</figure>