{% if data.size > 0 %}
  {% if embeddedStyles == true %}
  {% capture css %}
    {% render "../../../assets/styles/widgets/media-grid.css" %}
    {% render "../../../assets/styles/widgets/progress-bar.css" %}
  {% endcapture %}
  <style>{{ css }}</style>
  {% endif %}
  {% assign media = data | normalizeMedia %}
  <h2 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 %}
      <a href="{{ item.url | stripUtm }}" title="{{ alt | escape }}">
        <div class="item__wrapper">
        {% if item.subtext %}<div class="item__cover"></div>{% 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 -%}
          <!-- <img src="{{ item.image }}" alt="{{ alt }}" loading="{{ loadingStrategy }}" /> -->
          {{ item.image}}
        </div>
      </a>
    {% endfor %}
  </div>
{% endif %}