<div class="home_shop_collection">
  <div class="collection_wrapper">
    <div class="title">
      {% if section.settings.title %}
      	<h2> {{ section.settings.title }} </h2>
      {%  endif %}
       <div class="line-line-gray">
          <div class="line-line-color"></div>
        </div>
    </div>

    <div class="home_bannner">
    	<div class="left_banner">
          <div class="banner_top">
            {% if section.settings.banner1 != blank %}
            <a class="img_link" href="{{ section.settings.button_link1 }}">{% include 'image-element', image: section.settings.banner1, alt: section.settings.banner1 %}</a>
            {% endif %}
            <div class="more-info">
              {% if section.settings.text1  != blank%}
                  <a href="{{ section.settings.button_link1 }}" class="blog_title">{{ section.settings.text1 | escape}}</a>
              {% endif %}
              <div class="content">
              {% if section.settings.subtext1  != blank%}
                    {{ section.settings.subtext1 }}
              {% endif %}

              {%- if section.settings.button_labe1 != blank and section.settings.button_link1 != blank -%}
                <a href="{{ section.settings.button_link1 }}" class="btn hero__btn">
                  {{ section.settings.button_labe1 | escape }}
                </a>
              {%- endif -%}
              </div>

            </div>
          </div>
          <div class="banner_bottom">
            <div class="banner_bottom_left">
              {% if section.settings.banner2 != blank %}
              <a class="img_link" href="{{ section.settings.button_link2 }}">{% include 'image-element', image: section.settings.banner2, alt: section.settings.banner2 %}</a>
              {% endif %}
              <div class="more-info">
                {% if section.settings.text2  != blank%}
                    <a href="{{ section.settings.button_link2 }}" class="blog_title" >{{ section.settings.text2 | escape}}</a>
                {% endif %}
                <div class="content">
                {% if section.settings.subtext2  != blank%}
                      {{ section.settings.subtext2 }}
                {% endif %}

                {%- if section.settings.button_labe2 != blank and section.settings.button_link2 != blank -%}
                  <a href="{{ section.settings.button_link2 }}" class="btn hero__btn">
                    {{ section.settings.button_labe2 | escape }}
                  </a>
                {%- endif -%}
                </div>
              </div>
            </div>

            <div class="banner_bottom_left">
              {% if section.settings.banner3 != blank %}
              <a class="img_link" href="{{ section.settings.button_link3 }}">{% include 'image-element', image: section.settings.banner3, alt: section.settings.banner3,  %}</a>
              {% endif %}
              <div class="more-info">
                {% if section.settings.text3  != blank%}
                    <a href="{{ section.settings.button_link3 }}" class="blog_title">{{ section.settings.text3 | escape}}</a>
                {% endif %}
                <div class="content">
                {% if section.settings.subtext3  != blank%}
                      {{ section.settings.subtext3 }}
                {% endif %}

                {%- if section.settings.button_labe3 != blank and section.settings.button_link3 != blank -%}
                  <a href="{{ section.settings.button_link3 }}" class="btn hero__btn">
                    {{ section.settings.button_labe3 | escape }}
                  </a>
                {%- endif -%}
                </div>
              </div>
            </div>
          </div>
      </div>
    	<div class="right_banner">
          <div class="banner_bottom ">
            <div class="banner_bottom_left">
              {% if section.settings.banner4 != blank %}
              <a class="img_link" href="{{ section.settings.button_link4 }}">{% include 'image-element', image: section.settings.banner4, alt: section.settings.banner4 %}</a>
              {% endif %}
              <div class="more-info">
                {% if section.settings.text4  != blank%}
                    <a href="{{ section.settings.button_link4 }}" class="blog_title">{{ section.settings.text4 | escape}}</a>
                {% endif %}
                <div class="content">
                {% if section.settings.subtext4  != blank%}
                      {{ section.settings.subtext4 }}
                {% endif %}

                {%- if section.settings.button_labe4 != blank and section.settings.button_link4 != blank -%}
                  <a href="{{ section.settings.button_link4 }}" class="btn hero__btn">
                    {{ section.settings.button_labe4 | escape }}
                  </a>
                {%- endif -%}
                </div>
              </div>
            </div>

            <div class="banner_bottom_left">
              {% if section.settings.banner5 != blank %}
              <a class="img_link" href="{{ section.settings.button_link5 }}">{% include 'image-element', image: section.settings.banner5, alt: section.settings.banner5 %}</a>
              {% endif %}
              <div class="more-info">
                {% if section.settings.text5  != blank%}
                    <a href="{{ section.settings.button_link5 }}" class="blog_title" > {{ section.settings.text5 | escape}}</a>
                {% endif %}
                <div class="content">
                {% if section.settings.subtext5  != blank%}
                      {{ section.settings.subtext5 }}
                {% endif %}

                {%- if section.settings.button_labe5 != blank and section.settings.button_link5 != blank -%}
                  <a href="{{ section.settings.button_link5 }}" class="btn hero__btn">
                    {{ section.settings.button_labe5 | escape }}
                  </a>
                {%- endif -%}
                </div>
              </div>
            </div>
          </div>
          <div class="banner_top">
             {% if section.settings.banner6 != blank %}
            <a class="img_link" href="{{ section.settings.button_link6 }}">{% include 'image-element', image: section.settings.banner6, alt: section.settings.banner6 %}</a>
            {% endif %}
            <div class="more-info">
              {% if section.settings.text6  != blank%}
                 <a href="{{ section.settings.button_link6 }}" class="blog_title"> {{ section.settings.text6 | escape}}</a>
              {% endif %}
              <div class="content">
              {% if section.settings.subtext6  != blank%}
                    {{ section.settings.subtext6 }}
              {% endif %}

              {%- if section.settings.button_labe6 != blank and section.settings.button_link6 != blank -%}
                <a href="{{ section.settings.button_link6 }}" class="btn hero__btn">
                  {{ section.settings.button_labe1 | escape }}
                </a>
              {%- endif -%}
              </div>

            </div>
            </div>
        </div>

    </div>

  </div>
</div>

{% schema %}
  {
    "name": "Banners em destaque",
    "settings": [
		{
			"type": "text",
			"id" : "title",
			"label": "Título"
		},
		{
			"type": "text",
			"id": "subtitle",
			"label": "Subtítulo"
		},
		{
        	"type": "header",
        	"content": "Banner 1"
      	},
        {
          "type": "image_picker",
          "id": "banner1",
          "label": "Banner 1 - esquerda"
        },
		{
			"type": "text",
			"id": "text1",
			"label": "Texto"
		},
		{
			"type": "richtext",
			"id": "subtext1",
			"label": "Mais informações"
		},
		{
			"type": "text",
			"id": "button_labe1",
			"label": "Botão"
		},
		{
			"type": "url",
			"id": "button_link1",
			"label": "Link do botão"
		},
		{
        	"type": "header",
        	"content": "Banner 2"
      	},
		{
          "type": "image_picker",
          "id": "banner2",
          "label": "Banner 2 - esquerda"
        },
		{
			"type": "text",
			"id": "text2",
			"label": "Texto"
		},
		{
			"type": "richtext",
			"id": "subtext2",
			"label": "Mais informações"
		},
		{
			"type": "text",
			"id": "button_labe2",
			"label": "Botão"
		},
		{
			"type": "url",
			"id": "button_link2",
			"label": "Link do botão"
		},
		{
        	"type": "header",
        	"content": "Banner 3"
      	},
		{
          "type": "image_picker",
          "id": "banner3",
          "label": "Banner 3 - esquerda"
        },
		{
			"type": "text",
			"id": "text3",
			"label": "Texto"
		},
		{
			"type": "richtext",
			"id": "subtext3",
			"label": "Mais informações"
		},
		{
			"type": "text",
			"id": "button_labe3",
			"label": "Botão"
		},
		{
			"type": "url",
			"id": "button_link3",
			"label": "Link do botão"
		},
		{
        	"type": "header",
        	"content": "Banner 4"
      	},
		{
          "type": "image_picker",
          "id": "banner4",
          "label": "Banner 4 - direita"
        },
		{
			"type": "text",
			"id": "text4",
			"label": "Texto"
		},
		{
			"type": "richtext",
			"id": "subtext4",
			"label": "Mais informações"
		},
		{
			"type": "text",
			"id": "button_labe4",
			"label": "Botão"
		},
		{
			"type": "url",
			"id": "button_link4",
			"label": "Link do botão"
		},
		{
        	"type": "header",
        	"content": "Banner 5"
      	},
		{
          "type": "image_picker",
          "id": "banner5",
          "label": "Banner 5 - direita"
        },
		{
			"type": "text",
			"id": "text5",
			"label": "Texto"
		},
		{
			"type": "richtext",
			"id": "subtext5",
			"label": "Mais informações"
		},
		{
			"type": "text",
			"id": "button_labe5",
			"label": "Botão"
		},
		{
			"type": "url",
			"id": "button_link5",
			"label": "Link do botão"
		},
		{
        	"type": "header",
        	"content": "Banner 6"
      	},
		{
          "type": "image_picker",
          "id": "banner6",
          "label": "Banner 6 - direita"
        },
		{
			"type": "text",
			"id": "text6",
			"label": "Texto"
		},
		{
			"type": "richtext",
			"id": "subtext6",
			"label": "Mais informações"
		},
		{
			"type": "text",
			"id": "button_labe6",
			"label": "Botão"
		},
		{
			"type": "url",
			"id": "button_link6",
			"label": "Link do botão"
		}
	],
	"presets": [
		{
			"name": "Banners em destaque",
			"category": "astron"
		}
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
