{{ 'section-grid-banner.css' | asset_url | stylesheet_tag }}
{{ 'custom-swiper.css' | asset_url | stylesheet_tag }}
{%- liquid

  case section.settings.grid-column
  when '1'
  assign column = 'one-column'
  when '2'
  assign column = 'two-column'
  when '3'
  assign column = 'three-column'
  when '4'
  assign column = 'four-column'
  when '5'
  assign column = 'five-column'
  when '6'
  assign column = 'six-column'
  else
  assign column = 'three-column'
  endcase
  if section.settings.swiper_enable
  assign enable_slider = true  
  endif
 %}
{%- style -%}
    .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.50 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.50 | round: 0 }}px;
  }
   @media screen and (min-width: 576px) and (max-width: 749px){
   .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }
   }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
  .grid-banner .title-wrapper-with-link.content-align--left{    display: flex;flex-direction: row; flex-wrap:wrap;   align-items: center;}
  
  {%- for block in section.blocks -%} 
  .grid-banner-section.list .grid-banner-wrapper.reverse-columns,
  .grid-banner-slider.list .swiper-slide.reverse-columns{ flex-direction: row-reverse;}

    
  {% if block.settings.show_content != true %}
    .grid-banner-slider.list .swiper-slide .grid-banner-block-image, .grid-banner-section.list .grid-banner-wrapper .grid-banner-block-image{width:100%;}
  {% endif %}
    {% endfor %}
  
  .grid-banner .section-{{ section.id }}-padding .grid-banner-section.overlay .grid-banner-wrapper,
   .grid-banner .section-{{ section.id }}-padding  grid-slider.grid-banner-slider.overlay .overlay-banner-wrapper{ height: {{section.settings.overlay_height}}px;}
  .grid-banner .section-{{ section.id }}-padding .grid-banner-section.one-column:not(.grid) .grid-banner-wrapper:not(:last-child){margin-bottom:{{section.settings.column_gap}}px;}
  .grid-banner .grid-banner-section{gap:{{section.settings.column_gap}}px;}
.grid-banner .grid-banner-section.two-column{column-gap:{{section.settings.column_gap}}px;row-gap:calc(var(--grid-desktop-horizontal-spacing) + 120px);}
  {%- for block in section.blocks -%} 
   {% if block.settings.block_overlay_image %}
     .grid-banner  .list .grid-banner-wrapper:before{content:'';background:url({{ block.settings.block_overlay_image | image_url : width : 600 }});background-repeat:no-repeat;background-size: cover;position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;transition:all 0.3s linear;opacity:0; border-radius: var(--media-radius);}
     .grid-banner .list .grid-banner-wrapper:hover:before{opacity:1;}
     .grid-banner .list .grid-banner-wrapper:hover .grid-banner-inner .main-title,
     .grid-banner .list .grid-banner-wrapper:hover .grid-banner-inner .description{color:rgba(var(--color-background));}
     .demo5-list-banner.grid-banner  .grid-banner-wrapper:hover .grid-banner-content .grid-banner-inner .sub-title{color:rgba(var(--color-background),0.2);}
    {% endif %}
   {% endfor %}
   {% if section.settings.enable_block_button_arrow %}
    .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper  .grid-banner-inner .banner-button span.button-arrow {
    display: flex;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    justify-content: center;transition:all 0.3s linear;
    background: rgba(var(--color-button));color: rgba(var(--color-button-text));  
   }
     .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper  .grid-banner-inner .banner-button:hover span.button-arrow {background: rgba(var(--color-secondary-button));color: rgba(var(--color-secondary-button-text));}
     .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper  .grid-banner-inner .banner-button{color: rgba(var(--color-secondary-button));background: rgba(var(--color-secondary-button-text));}
     .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper  .grid-banner-inner .banner-button:hover{background: rgba(var(--color-button));color: rgba(var(--color-button-text)); }
     .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper  .grid-banner-inner .banner-button{padding: 0 10px 0 3rem;gap: 30px;}


    
     
      @media screen and (max-width: 767px) {
        .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper  .grid-banner-inner .banner-button{padding: 0 10px 0 2rem;gap: 15px;}
      }
     {% endif %}
  
  .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper .grid-banner-section.grid .grid-banner-wrapper.reverse-columns .grid-banner-block-image img.grid-banner-image{aspect-ratio:auto;height:90%}
    .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper .grid-banner-section.grid .grid-banner-wrapper .grid-banner-block-image img.grid-banner-image{aspect-ratio: 4 / 5;}
   .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper .grid-banner-section.grid .grid-banner-wrapper.reverse-columns{flex-direction: column-reverse;display:flex;justify-content: flex-end;}
  .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper .grid-banner-section.grid .grid-banner-wrapper.reverse-columns .grid-banner-inner{padding-top:0;}
.grid-banner .grid-banner-section.two-column .grid-banner-wrapper.reverse-columns:last-child{margin-top:auto}
  
    @media screen and (max-width: 1540px) {
     .grid-banner .section-{{ section.id }}-padding .grid-banner-section.overlay .grid-banner-wrapper,
     .grid-banner .section-{{ section.id }}-padding  grid-slider.grid-banner-slider.overlay .overlay-banner-wrapper{ height: {{section.settings.overlay_height_laptop}}px;}
    }
   @media screen and (max-width: 1340px) {
      .grid-banner .section-{{ section.id }}-padding .grid-banner-wrapper .grid-banner-section.grid .grid-banner-wrapper .grid-banner-block-image img.grid-banner-image{aspect-ratio: auto;}
     .grid-banner .grid-banner-section.two-column{column-gap:{{section.settings.mobile_column_gap}}px; row-gap:{{section.settings.mobile_column_gap}}px }
   }
    @media screen and (max-width: 1199px) {
 .grid-banner-wrapper .grid-banner-content .grid-banner-inner .main-title a{font-size: calc(.6 * var(--font-h2-size));}
     .grid-banner .section-{{ section.id }}-padding .grid-banner-section.overlay .grid-banner-wrapper,
     .grid-banner .section-{{ section.id }}-padding  grid-slider.grid-banner-slider.overlay .overlay-banner-wrapper{ height: {{section.settings.overlay_height_tab}}px;}
    }
  @media screen and (max-width: 767px) {
   .grid-banner .section-{{ section.id }}-padding .grid-banner-section.overlay .grid-banner-wrapper,
   .grid-banner .section-{{ section.id }}-padding  grid-slider.grid-banner-slider.overlay .overlay-banner-wrapper { height: {{section.settings.overlay_height_mobile}}px;}
  }
  @media screen and (max-width: 750px) {
    .grid-banner-wrapper .grid-banner-content .grid-banner-inner .main-title,
      .grid-banner-wrapper .grid-banner-content .grid-banner-inner .main-title a{font-size: calc(.45 * var(--font-h2-size));}
    .grid-banner .grid-banner-section.two-column{column-gap:15px;row-gap:15px}
  .grid-banner .section-{{ section.id }}-padding .grid-banner-section.one-column:not(.grid) .grid-banner-wrapper:not(:last-child){margin-bottom:calc( {{section.settings.column_gap}}px / 2);}
  .grid-banner-section.list .grid-banner-wrapper.reverse-columns, .grid-banner-slider.list .swiper-slide.reverse-columns{flex-direction:column;}   
  }
    @media screen and (max-width: 989px) {
      .grid-banner-wrapper .grid-banner-content .grid-banner-inner .main-title{padding-top:15px}
      .grid-banner-wrapper .grid-banner-content .grid-banner-inner .description{padding-bottom:15px}
      .grid-banner .grid-banner-section.two-column .grid-banner-wrapper.reverse-columns:last-child{margin-top:0;}
      .grid-banner-section.grid .grid-banner-wrapper .grid-banner-content .grid-banner-inner {padding:0 10px;}
       .grid-banner .slider.slider--tablet .slider__slide{        max-width: calc(50% - var(--grid-desktop-horizontal-spacing)* 1 / 2);
        width: calc(50% - var(--grid-desktop-horizontal-spacing)* 1 / 2);}
  }
   @media screen and (max-width: 480px) {
    .grid-banner-wrapper .grid-banner-content .grid-banner-inner .description{font-size: calc(.9 * var(--font-h6-size));}
     .grid-banner-wrapper .grid-banner-content .grid-banner-inner .main-title,
     .grid-banner-wrapper .grid-banner-content .grid-banner-inner .main-title a{font-size: calc(.35 * var(--font-h2-size));}
  .grid-banner-section.grid .grid-banner-wrapper .grid-banner-content .grid-banner-inner{padding:0 4px}
  }
{%- endstyle -%}
 
<div class="grid-banner color-{{ section.settings.color_scheme }} gradient {% if section.settings.title == blank %} no-heading{% endif %} {{ section.settings.custom_class_name }} ">
 <div class="{% if section.settings.page_full_width %} page-full-width {% else %} page-width {% endif %} {% if section.settings.page_full_width_spacing %} page-full-width_spacing {% endif %}section-{{ section.id }}-padding isolate">
 <div class="row"> 
  <div class="grid-banner-wrapper">
     {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin content-align--{{ section.settings.column_alignment }}">
<div class="data-left">        
 {%- if section.settings.sub_heading != blank -%}  
         <h6 class="sub-heading">{{ section.settings.sub_heading | escape }}</h6>
         {%- endif -%} 
         {%- if section.settings.title != blank -%}  
          <h2 class="title {{ section.settings.heading_size }}">
            {{ section.settings.title | escape }}
          </h2>
          {%- endif -%} 
          {%- if section.settings.description != blank -%}  
          <p class="description">{{ section.settings.description }}</p>
          {%- endif -%}
</div>
        <div class="btn-left">
          {%- if section.settings.button_label != blank -%}
            <a {% if section.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ section.settings.button_link }}"{% endif %} class="button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">{{ section.settings.button_label | escape }}</a>
          {%- endif -%}
        </div>
          </div>
    {%- endunless -%}
       {% unless enable_slider %}
      <slider-component class="slider-mobile-gutter">
     <div id="Slider-{{ section.id }}"
        role="list" 
       class="grid slider slider--tablet grid--peek grid-banner-section {{ column }} {{ section.settings.banner_style }} {% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}">     
         {% else %}
    <grid-slider class="grid-banner-slider  {% if section.settings.banner_style != 'grid' %}{{ section.settings.banner_style }} {% endif %} {% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}">
      <div data-slider-options='{"loop": "{%- if section.settings.centered_slide -%}1{%- else -%}2{%- endif -%}","desktop": "{{ section.settings.desktop_column }}", "laptop": "{{ section.settings.laptop_column }}", "tablet": "{{ section.settings.tablet_column }}","mobile": "{{ section.settings.mobile_column }}", "gap":"{{ section.settings.column_gap }}","auto_play": "{{ section.settings.auto_play }}"}'>
      <div class="swiper" data-swiper-slider>
        <div class="swiper-wrapper ">
         {%- endunless -%}
       {%- for block in section.blocks -%} 
       <div  id="Slide-{{ section.id }}-{{ forloop.index }}"
         class="{% unless enable_slider %}grid-banner-wrapper grid__item slider__slide {% else %} desk-col-{{ section.settings.desktop_column | replace: '.5', '-half' }} lap-col-{{ section.settings.laptop_column | replace: '.5', '-half' }} tablet-col-{{ section.settings.tablet_column | replace: '.5', '-half' }} mobile-col-{{ section.settings.mobile_column | replace: '.5', '-half' }}  swiper-slide{% endunless %} {% if section.settings.banner_style == 'overlay' %} overlay-banner-wrapper  {% endif %} {% if block.settings.reverse_column %}reverse-columns{% endif %}">   
         {% if enable_slider and section.settings.custom_class_name == 'demo5-list-banner' %}<div class="grid-banner-wrapper">{% endif %}
         <div class="grid-banner-block-image">
          {%- if block.settings.enable_title_link %} <a href="{{ block.settings.block_button_link }}" class="grid-banner-image">{% endif %}
          {% if block.settings.block_image != blank %}
            <img
                      class="grid-banner-image"
                      srcset="{%- if block.settings.block_image.width >= 375 -%}{{ block.settings.block_image | image_url: width: 375 }} 375w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 550 -%}{{ block.settings.block_image | image_url: width: 550 }} 550w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 750 -%}{{ block.settings.block_image | image_url: width: 750 }} 750w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 1100 -%}{{ block.settings.block_image | image_url: width: 1100 }} 1100w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 1500 -%}{{ block.settings.block_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 1780 -%}{{ block.settings.block_image | image_url: width: 1780 }} 1780w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 2000 -%}{{ block.settings.block_image | image_url: width: 2000 }} 2000w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 3000 -%}{{ block.settings.block_image | image_url: width: 3000 }} 3000w,{%- endif -%}
                      {%- if block.settings.block_image.width >= 3840 -%}{{ block.settings.block_image | image_url: width: 3840 }} 3840w,{%- endif -%}
                      {{ block.settings.block_image | image_url: width: 1500 }} {{ block.settings.block_image.width }}w"
                      sizes="100vw"
                      src="{{ block.settings.block_image | image_url: width: 1500 }}"
                      loading="lazy"              
                      alt="{{ block.settings.block_image.alt | escape }}"
                      width="{{ block.settings.block_image.width }}"
                      height="{{ block.settings.block_image.width | divided_by: block.settings.block_image.aspect_ratio | round }}"
                    >  
            {%- else -%}
                  {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
                  {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
                  {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
         {%- if block.settings.enable_title_link %} </a> {% endif %}
         </div>    
          <div class="grid-banner-content {% unless block.settings.show_content %}hidden {% endunless %} {{ block.settings.desktop_content_position }}">
             <div class="grid-banner-inner banner--content-align-{{ block.settings.desktop_content_alignment }}  {% if section.settings.banner_style == 'overlay' %} {% endif %}">
                 {% if block.settings.block_sub_title != blank %}
                    <h6 class="sub-title">{{ block.settings.block_sub_title }}</h6>
                    {% endif %}
                {% if block.settings.block_title != blank %}
                    <h2 class="main-title ">
                    {% if block.settings.enable_title_link %}<a href="{{ block.settings.block_button_link }}">{% endif %}
                    {{ block.settings.block_title }}
                    {% if block.settings.enable_title_link %}</a>{% endif %}
                    </h2>
                    {% endif %}
                    {% if block.settings.block_description != blank %}
                    <p class="description">{{ block.settings.block_description }}</p>
                    {% endif %}      
                    {% if block.settings.block_button_text != blank %}
                    <a href="{{ block.settings.block_button_link }}" class="banner-button button button--primary">{{ block.settings.block_button_text }}
                    {% if section.settings.enable_block_button_arrow %}
                      <span class="button-arrow">
                      <svg width="18" height="18" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <path d="M42.6706 234.667H417.839L304.921 121.749C302.884 119.781 301.258 117.427 300.14 114.825C299.022 112.222 298.434 109.423 298.409 106.59C298.385 103.757 298.924 100.948 299.997 98.3263C301.07 95.7045 302.654 93.3226 304.657 91.3196C306.66 89.3165 309.042 87.7324 311.664 86.6598C314.285 85.5871 317.094 85.0474 319.927 85.072C322.76 85.0966 325.559 85.6851 328.162 86.8032C330.765 87.9212 333.119 89.5464 335.087 91.584L484.42 240.917C488.419 244.918 490.666 250.343 490.666 256C490.666 261.657 488.419 267.082 484.42 271.083L335.087 420.416C331.063 424.302 325.674 426.452 320.081 426.404C314.487 426.355 309.136 424.111 305.181 420.156C301.226 416.201 298.982 410.85 298.934 405.257C298.885 399.663 301.035 394.274 304.921 390.251L417.839 277.333H42.6706C37.0126 277.333 31.5864 275.086 27.5856 271.085C23.5848 267.084 21.3372 261.658 21.3372 256C21.3372 250.342 23.5848 244.916 27.5856 240.915C31.5864 236.914 37.0126 234.667 42.6706 234.667Z" fill="currentcolor"></path>
                      </svg>
                      </span>
                    {% endif %}
                    </a>
                 {% endif %}
             </div> 
          </div> 
           {% if enable_slider and section.settings.custom_class_name == 'demo5-list-banner' %}</div>{% endif %}
       </div>  
         {% endfor %}   
      {% unless enable_slider %}        
        </div>
          <div class="slider-buttons">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
            aria-controls="Slider-{{ section.id }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
            aria-controls="Slider-{{ section.id }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
    </slider-component>
      {% else %}
       </div>
        {% if section.settings.swiper_navigation != blank %}
        <div class="swiper-navigation">  
        <div class="swiper-button-next"><span></span></div>
        <div class="swiper-button-prev"><span></span></div>
        </div>
          {% endif %}
           {% if section.settings.swiper_pagination != blank %}
    <div class="swiper-pagination"></div>
    {% endif %}
      </div>   
        </div>
      </grid-slider>
      {%- endunless -%}      
  </div>
</div>
</div>
</div>  
<!-- Script-Start -->

<script type="text/javascript">
  $(document).ready(function(){
    $( ".gridPlay" ).each(function( index ) {
      $(this).on('click', function(){
      $(this).css('display','none');
      $(this).next('.gridPause').css('display','flex');
      $(this).closest('.dt-sc-grid-banner').find('video').trigger('play');
      });
    });
    $( ".gridPause" ).each(function( index ) {
      $(this).on('click', function(){
      $(this).css('display','none');
      $(this).prev('.gridPlay').css('display','flex');
      $(this).closest('.dt-sc-grid-banner').find('video').trigger('pause');
      });
    });
  });
</script>

<!-- Script-End -->
{% schema %}
{
  "name": "t:sections.grid-banner.name",
  "class": "section section-grid-banner",
  "tag": "section",
  "settings": [
    {
      "type":"checkbox",
      "id":"page_full_width",
       "default": false,
      "label": "t:sections.all.page_full_width.label"
    },
    {
      "type":"checkbox",
      "id":"page_full_width_spacing",
       "default": false,
      "label": "t:sections.all.page_full_width_spacing.label"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Grid banner",
      "label": "t:sections.all.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h3",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "text",
      "id": "sub_heading",
      "default": "Sub Heading", 
      "label": "t:sections.all.sub_heading.label"
    },
     {
      "type": "text",
      "id": "description",
      "default": "Use This Text To Share The Information Which You Like!.",   
      "label": "t:sections.all.description.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.all.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.all.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "default": false,
      "label": "t:sections.all.button_style_secondary.label"
      },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.grid-banner.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.grid-banner.settings.column_alignment.options__2.label"
        }
      ],
      "default": "center",
      "label": "t:sections.grid-banner.settings.column_alignment.label"
    },
   
    {
    "type": "select",
    "id": "banner_style",
    "options": [
    {
    "value": "grid",
    "label": "t:sections.grid-banner.settings.banner_style.options__1.label"
    },
    {
    "value": "list",
    "label": "t:sections.grid-banner.settings.banner_style.options__2.label"
    },  
    {
    "value": "overlay",
    "label": "t:sections.grid-banner.settings.banner_style.options__3.label"
    }
    ],
     "default": "grid",
     "label": "t:sections.grid-banner.settings.banner_style.label"
    },
    {
    "type": "select",
    "id": "grid-column",
    "options": [
    {
    "value": "1",
    "label": "t:sections.grid-banner.settings.grid-column.options__1.label"
    },
    {
    "value": "2",
    "label": "t:sections.grid-banner.settings.grid-column.options__2.label"
    },
    {
    "value": "3",
    "label": "t:sections.grid-banner.settings.grid-column.options__3.label"
    },
    {
    "value": "4",
    "label": "t:sections.grid-banner.settings.grid-column.options__4.label"
    },
    {
    "value": "5",
    "label": "t:sections.grid-banner.settings.grid-column.options__5.label"
    },
    {
    "value": "6",
    "label": "t:sections.grid-banner.settings.grid-column.options__6.label"
    }
    ],
    "default": "4",
    "label": "t:sections.grid-banner.settings.grid-column.label" 
    },
    {
      "type":"checkbox",
      "id":"enable_block_button_arrow",
      "label":"t:sections.grid-banner.settings.enable_block_button_arrow.label",
      "default": false
    },
   {
      "type": "header",
      "content": "t:sections.grid-banner.settings.overlay_image_height_settings.content"
    },
    {
      "type": "range",
      "id": "overlay_height",
      "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "default": 400,
      "label": "t:sections.grid-banner.settings.overlay_height.label"
   },
     {
      "type": "range",
      "id": "overlay_height_laptop",
      "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "default": 300,
      "label": "t:sections.grid-banner.settings.overlay_height_laptop.label"
    },
     {
      "type": "range",
      "id": "overlay_height_tab",
       "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "default": 300,
      "label": "t:sections.grid-banner.settings.overlay_height_tab.label"
    },
     {
      "type": "range",
      "id": "overlay_height_mobile",
      "min": 0,
      "max": 1000,
      "step": 100,
      "unit": "px",
      "default": 200,
      "label": "t:sections.grid-banner.settings.overlay_height_mobile.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 160,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    },
    {
    "type": "header",
    "content": "t:sections.all.custom_class_heading.content"
    },
    {
    "type": "text",
    "id": "custom_class_name",
    "label": "t:sections.all.custom_class_name.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.swiper.swiper_slider_title"
    },
    {
      "type": "checkbox",
      "id": "swiper_enable",
      "default": false,
      "label": "t:sections.all.swiper.swiper_slider_enable",
      "info":"enabling slider design changes"
    },
    {
      "type": "range",
      "id": "desktop_column",
      "min": 1,
      "max": 10,
      "step": 1,
      "label": "t:sections.all.swiper.desktop_column",
      "default": 4
    },
    {
      "type": "range",
      "id": "laptop_column",
      "min": 1,
      "max": 10,
      "step": 1,
      "label": "t:sections.all.swiper.laptop_column",
      "default": 4
    },
    {
      "type": "range",
      "id": "tablet_column",
      "min": 1,
      "max": 5,
      "step": 1,
      "label": "t:sections.all.swiper.tablet_column",
      "default": 3
    },
    {
      "type": "range",
      "id": "mobile_column",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "t:sections.all.swiper.mobile_column",
      "default": 1
    },
    {
      "type": "text",
      "id": "column_gap",
      "label": "t:sections.insta-gallery.settings.column_gap.label",
      "default": "20"
    },
     {
      "type": "text",
      "id": "mobile_column_gap",
      "label": "mobile gap",
       "info":"units not needed",
      "default": "20"
    },
    {
      "type": "checkbox",
      "id": "centered_slide",
      "default": false,
      "label": "t:sections.all.swiper.centered_slide"
    },
    {
      "type": "checkbox",
      "id": "swiper_pagination",
      "default": false,
      "label": "t:sections.all.swiper.swiper_pagination"
    },
    {
      "type": "checkbox",
      "id": "swiper_navigation",
      "default": false,
      "label": "t:sections.all.swiper.swiper_navigation"
    },
    {
      "type": "range",
      "id": "auto_play",
      "min": 0,
      "max": 5,
      "step": 1,
      "label": "t:sections.all.swiper.auto_play",
      "default": 0
    }
  ],
  "blocks": [
    {
    "type": "text",
    "name": "t:sections.grid-banner.blocks.text.name",
    "settings": [
    {
    "type": "image_picker",
    "id": "block_image",
    "label": "t:sections.grid-banner.blocks.text.settings.block_image.label"
    },
    {
    "type": "checkbox",
    "id": "show_content",
    "label": "t:sections.grid-banner.blocks.text.settings.show_content.label",
    "default": true
    },
    {
    "type": "text",
    "id": "block_title",
    "label": "t:sections.grid-banner.blocks.text.settings.block_title.label",
    "default": "Title"
    },
    {
    "type": "checkbox",
    "id": "enable_title_link",
    "label": "t:sections.grid-banner.blocks.text.settings.enable_title_link.label",
    "default": false
    },
    {
    "type": "text",
    "id": "block_sub_title",
    "label": "t:sections.grid-banner.blocks.text.settings.block_sub_title.label",
    "default": "Sub title"
    },
    {
    "type": "text",
    "id": "block_description",
    "label": "t:sections.grid-banner.blocks.text.settings.block_description.label",
    "default": "Short description"
    },
    {
    "type": "text",
    "id": "block_button_text",
    "label": "t:sections.grid-banner.blocks.text.settings.block_button_text.label"
    },
    {
    "type": "url",
    "id": "block_button_link",
    "label": "t:sections.grid-banner.blocks.text.settings.block_button_link.label"
    },
    {
    "type": "image_picker",
    "id": "block_overlay_image",
    "label": "t:sections.grid-banner.blocks.text.settings.block_overlay_image.label"
    },  
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
       {
          "value": "left",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_alignment.label"
    },
   {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.grid-banner.blocks.text.settings.desktop_content_position.label"
    },
    {	
    "type": "checkbox",	
    "id": "reverse_column",	
    "label": "t:sections.grid-banner.blocks.text.settings.reverse_column.label",	
     "info" :"Only worked for list & grid style",
    "default": false	
    }    
    ]
    }
    ],
    "presets": [
    {
      "name": "t:sections.grid-banner.presets.name",
       "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        },
         {
          "type": "text"
        } 
      ]
    }
  ]
}

{% endschema %}