<div class="{{ section.settings.display }}" data-section-id="{{ section.id }}" data-section-type="banner-section">
  <div class="grid-container">
    <div class="box border-none index-banner-grid-container">
      {%- if section.settings.title != blank or section.settings.sub_title != blank -%}
        <div class="box-divider grid-x">
          {%- if section.settings.title != blank -%}
            <h2 class="box-title width-100">{{ section.settings.title }}</h2>
          {%- endif -%}
          {%- if section.settings.sub_title != blank -%}
            <p class="sub-title width-100">{{ section.settings.sub_title }}</p>
          {%- endif -%}
        </div>
      {%- endif -%}
      <div class="box-content">
        {%- if section.blocks.size > 0 -%}
          <div class="index-banner-grid-list grid-x grid-margin-x align-center">
            {%- for block in section.blocks -%}
              <div class="cell small-{{ block.settings.column_small }} medium-{{ block.settings.column_medium }} large-{{ block.settings.column_large }} xlarge-{{ block.settings.column_xlarge }} xxlarge-{{ block.settings.column_xxlarge }} xxxlarge-{{ block.settings.column_xxxlarge }} text-center">
                <div class="index-banner-grid-item effect effect-scope">
                  {%- unless block.settings.image == blank -%}
                    <a href="{{ block.settings.link }}" class="index-banner-grid-image display-block">
                      <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ block.settings.image | img_url: image_size }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" style="border-radius: 50%;border: 1.5px;border-color: orange;border-style: solid;padding: 1.5px;"/>
                    </a>
                  {% else %}
                    <a href="{{ block.settings.link }}" class="index-banner-grid-image display-block" >
                      {% if section.blocks.size == 1 %}
                      <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ '1470x200.png' | asset_url }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" />
                      {% elsif section.blocks.size == 2 %}
                      <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ '720x200.png' | asset_url }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" />
                      {% else %}
                      <img src="{{ 'icon-loader-clock.svg' | asset_url }}" data-src="{{ '270x270.png' | asset_url }}" class="width-100 lazyload" alt="{{ block.settings.image.alt }}" />
                      {% endif %}
                    </a>
                  {%- endunless -%}
                  {%- if block.settings.action_text != blank -%}
                    <a href="{{ block.settings.link }}" class="button index-banner-grid-button">{{ block.settings.action_text }}</a>
                  {%- endif -%}
                  {%- if block.settings.collection_name != blank -%}
                  <p style="margin-top: 10%;font-size: 10px;line-height: 1;text-rendering: optimizeLegibility;overflow-wrap: break-word;"> {{ block.settings.collection_name }}</p>
                  {%- endif -%}
                </div>
              </div>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>