{% if section.blocks.size > 0 %}
<div class="service_container">
  <div class="service_wrapper page-width">
    <div class="service_content_container">
      <ul class="service_icons">
        {% for block in section.blocks %}
        {% if block.type == 'service_content' %}
        <li class="service_icon">
          <div class="service_content">
            {% if block.settings.image != blank %}
            <div class="sercives_img">
              <div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%; position: relative; width: 100%;" data-image-loading-animation>
                <img id="img{{ section.id }}"
                     class="feature-row__image lazyload"
                     data-src="{{ block.settings.image | img_url: 'master' }}"
                     data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                     data-sizes="auto"
                     width="{{ block.settings.image.width }}"
                     height="{{ block.settings.image.height }}"
                     alt="{{ block.settings.image.alt | escape }}"
                     style="position: absolute; top: 0;">
              </div>
            </div>
            {% endif %}
            <div class="service_info">
              {% if block.settings.title != blank %}
              <h4 class="title">{{ block.settings.title }}</h4>
              {% endif %}
              {% if block.settings.title != blank %}
              <p class="content">{{ block.settings.content }}</p>
              {% endif %}
            </div>
          </div>
        </li>
        {% endif %}
        {% endfor %}
      </ul>
    </div>
  </div>
</div>
{% endif %}


{% schema %}
  {
    "name": "Barra de informações",
	"class": "index-section",
    "settings": [],
	"blocks": [
		{
			"type": "service_content",
			"name": "Servico",
			"settings": [
				{
                    "type": "image_picker",
                    "id": "image",
                    "label": "Imagem"
                },
                {
                    "type": "text",
                    "id": "title",
                    "label": "Título"
                },
                {
                    "type": "text",
                    "id": "content",
                    "label": "Detalhes"
                }
			]
		}
	],
	"presets": [
		{
			"name": "Barra de informações",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
