<div class="home_collection_grid">
  <div class="page-width collGrid_wrapper">
    <div class="collgrid_content">
      <div class="three_column_container">
        <div class="grid_item grid_25 grid_item1 animatable zoomIn animate">
          <div class="grid_content">
            <a href="{% if section.settings.url1 != blank %}{{ section.settings.url1 }}{% else %}#{% endif %}" class="collection_grid_link">
              {% if section.settings.image1 != blank %}
              <img class="lazyload" data-src="{{ section.settings.image1 | img_url: 'master' }}" alt="{{ section.settings.title1 }}">
              {% endif %}
              {% if section.settings.title1 != blank %}
              <h4 class="title animatable fadeInLeft animate">{{ section.settings.title1 }}</h4>
              {% endif %}
            </a>
          </div>
        </div>
        <div class="grid_item grid_50 grid_item2 animatable zoomIn animate">
          <div class="grid_content">
            <a href="{% if section.settings.url2 != blank %}{{ section.settings.url2 }}{% else %}#{% endif %}" class="collection_grid_link">
              {% if section.settings.image2 != blank %}
              <img class="lazyload" data-src="{{ section.settings.image2 | img_url: 'master' }}" alt="{{ section.settings.title2 }}">
              {% endif %}
              {% if section.settings.title2 != blank %}
              <h4 class="title animatable fadeInLeft animate">{{ section.settings.title2 }}</h4>
              {% endif %}
            </a>
          </div>
        </div>
        <div class="grid_item grid_25 grid_item3 animatable zoomIn animate">
          <div class="grid_content">
            <a href="{% if section.settings.url3 != blank %}{{ section.settings.url3 }}{% else %}#{% endif %}" class="collection_grid_link">
              {% if section.settings.image3 != blank %}
              <img class="lazyload" data-src="{{ section.settings.image3 | img_url: 'master' }}" alt="{{ section.settings.title3 }}">
              {% endif %}
              {% if section.settings.title3 != blank %}
              <h4 class="title animatable fadeInLeft animate">{{ section.settings.title3 }}</h4>
              {% endif %}
            </a>
          </div>
        </div>
      </div>
      <div class="two_column_container">
        <div class="grid_item grid_50 grid_item4 animatable zoomIn animate">
          <div class="grid_content">
            <a href="{% if section.settings.url4 != blank %}{{ section.settings.url4 }}{% else %}#{% endif %}" class="collection_grid_link">
              {% if section.settings.image2 != blank %}
              <img class="lazyload" data-src="{{ section.settings.image4 | img_url: 'master' }}" alt="{{ section.settings.title4 }}">
              {% endif %}
              {% if section.settings.title4 != blank %}
              <h4 class="title animatable fadeInLeft animate">{{ section.settings.title4 }}</h4>
              {% endif %}
            </a>
          </div>
        </div>
        <div class="grid_item grid_50 grid_item5 animatable zoomIn animate">
          <div class="grid_content">
            <a href="{% if section.settings.url5 != blank %}{{ section.settings.url5 }}{% else %}#{% endif %}" class="collection_grid_link">
              {% if section.settings.image2 != blank %}
              <img class="lazyload" data-src="{{ section.settings.image5 | img_url: 'master' }}" alt="{{ section.settings.title5 }}">
              {% endif %}
              {% if section.settings.title5 != blank %}
              <h4 class="title animatable fadeInRight animate">{{ section.settings.title5 }}</h4>
              {% endif %}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


{% schema %}
  {
    "name": "Grid de coleção",
    "settings": [
		{
			"type": "header",
			"content": "Coleção 1"
		},
		{
			"type": "image_picker",
			"id": "image1",
			"label": "Imagem da coleção",
			"info": "Tamanho da imagem de upload: 380x500"
		},
		{
			"type": "text",
			"id": "title1",
			"label": "Nome da coleção"
		},
		{
			"type": "url",
			"id": "url1",
			"label": "Url da coleção"
		},
		{
			"type": "header",
			"content": "Coleção 2"
		},
		{
			"type": "image_picker",
			"id": "image2",
			"label": "Imagem da coleção",
			"info": "Tamanho da imagem de upload: 760x500"
		},
		{
			"type": "text",
			"id": "title2",
			"label": "Nome da coleção"
		},
		{
			"type": "url",
			"id": "url2",
			"label": "Url da coleção"
		},
		{
			"type": "header",
			"content": "Coleção 3"
		},
		{
			"type": "image_picker",
			"id": "image3",
			"label": "Collection image",
			"info": "Tamanho da imagem de upload: 380x500"
		},
		{
			"type": "text",
			"id": "title3",
			"label": "Nome da coleção"
		},
		{
			"type": "url",
			"id": "url3",
			"label": "Url da coleção"
		},
		{
			"type": "header",
			"content": "Coleção 4"
		},
		{
			"type": "image_picker",
			"id": "image4",
			"label": "Imagem da coleção",
			"info": "Tamanho da imagem de upload: 770x335"
		},
		{
			"type": "text",
			"id": "title4",
			"label": "Nome da coleção"
		},
		{
			"type": "url",
			"id": "url4",
			"label": "Url da coleção"
		},
		{
			"type": "header",
			"content": "Coleção 5"
		},
		{
			"type": "image_picker",
			"id": "image5",
			"label": "Collection image",
			"info": "Tamanho da imagem de upload: 770x335"
		},
		{
			"type": "text",
			"id": "title5",
			"label": "Nome da coleção"
		},
		{
			"type": "url",
			"id": "url5",
			"label": "Url da coleção"
		}
	],
	"presets": [
		{
			"name": "Grid da coleção",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
