{% if data.size > 0 %}
  {% if embeddedStyles == true %}
  {% capture css %}
    {% render "../../../assets/styles/components/media-grid.css" %}
    {% render "../../../assets/styles/components/progress-bar.css" %}
  {% endcapture %}
  <style>{{ css }}</style>
  {% endif %}
  {% assign media = data | normalizeMedia %}
  <h2 id="{{ title | downcase }}" class="now__section--header flex--centered">
    {% tablericon icon title %}
    {{ title }}
  </h2>
  <div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
    {% for item in media limit: count %}
      {% assign alt = item.alt | strip | escape %}
      <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
        <div class="item__wrapper{% if item.subtext %} shadow{% endif %}">
          <div class="item__meta-text">
            {% if item.title %}
              <div class="header">{{ item.title }}</div>
            {% endif %}
            {% if item.percentage %}
              {% render "partials/now/progress-bar.liquid", percentage:item.percentage %}
            {% endif %}
            {% if item.subtext %}
              <div class="subheader">
                {{ item.subtext }}
              </div>
            {% endif %}
          </div>
          {%- capture loadingStrategy -%}
            {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
          {%- endcapture -%}
          {% if shape == 'square' %}
            {% image item.image, alt, '', loadingStrategy, 320 %}
          {% else %}
            {% image item.image, alt, '', loadingStrategy, 200 %}
          {% endif %}
        </div>
      </a>
    {% endfor %}
  </div>
{% endif %}