{% assign hex2rgb_r = '' %}
{% assign hex2rgb_g = '' %}
{% assign hex2rgb_b = '' %}	
{% assign hex2rgb_hex = block.settings.bg_color_image %}
{% include 'hex2rgb' %}

<div data-animation_name="{{ block.settings.animation_name }}" data-animation_delay="{{ block.settings.animation_delay }}" class="space_top_header_grid {% if block.settings.animation_name != 'noeffect' %}scroll_animation {% endif %} {{block.settings.img_GridWidth}} flexItem grid_sections" style="padding: 0px; border: 0px; margin: 0px; background: rgba({{ hex2rgb_r  }},{{ hex2rgb_g  }},{{ hex2rgb_b  }}, {{ block.settings.bg_opacity_image }});animation-duration: {{ block.settings.animation_duration }};">
  <div class="grid_sections" style ="padding: {{block.settings.img_PaddingTop}}px {{block.settings.img_PaddingRight}}px {{block.settings.img_PaddingBottom}}px {{block.settings.img_PaddingLeft}}px;" style_desktop ="padding: {{block.settings.img_PaddingTop}}px {{block.settings.img_PaddingRight}}px {{block.settings.img_PaddingBottom}}px {{block.settings.img_PaddingLeft}}px;" style_mobile ="padding: {{block.settings.mob_img_PaddingTop}}px {{block.settings.mob_img_PaddingRight}}px {{block.settings.mob_img_PaddingBottom}}px {{block.settings.mob_img_PaddingLeft}}px;" >
    <div class="contnet_grid_html">
      <div class="content_grid_box">
        {% if block.settings.GridImageLink != blank %}<a href="{{block.settings.GridImageLink}}">{% endif %}
        {%assign grid_block_img = '' %} 
        {% if block.settings.GridImage == blank %}

        {% if block.settings.img_GridWidth == 'oneThird' %}
        {%assign grid_block_img = 'grid-block-1-3.jpg' | asset_url %}
        {% endif  %}
        {% if block.settings.img_GridWidth == 'half' %}
        {%assign grid_block_img = 'grid-block-1-2.jpg' | asset_url %}
        {% endif  %}
        {% if block.settings.img_GridWidth == 'twoThird' %}
        {%assign grid_block_img = 'grid-block-2-3.jpg' | asset_url %}
        {% endif  %}
        {%assign grid_block_image_new = grid_block_img %}
        {%else%}
        {%assign grid_block_img = block.settings.GridImage | img_url:"" %}
        {%assign grid_block_image_new = block.settings.GridImage | img_url:"100x" %}
        {% endif %}

        {%assign grid_block_image_alt = block.settings.GridImage_alt %}

        {% if settings.image_loading_type == 'lazy' %}
        <img alt="{{ grid_block_image_alt }}" data-sizes="auto" class="lazyloadimage lazyload blur-up" src="{{ grid_block_image_new }}" data-src="{{ grid_block_img }}" >
        {% else %}
        <img alt="{{ grid_block_image_alt }}" src="{{ grid_block_img }}" >
        {% endif %}

        {% if block.settings.GridImageLink != blank %}</a>{% endif %} 
        {% if block.settings.GridImageBtn != blank %}
        <div class="grid_inner_button text-{{block.settings.img_BtnPosition}}">
          <a class="button scroll_link_trigger" href="{{block.settings.GridImageBtnLink}}">
            {{block.settings.GridImageBtn}}
          </a>
        </div>

        {% endif %}
      </div>

      {% if block.settings.product_grid_1 != blank %}
      {%- assign product = all_products[block.settings.product_grid_1] -%}
      {%include 'gird-product' varation_type: block.settings.product_variants_1 %}
      {% endif %}
    </div>
  </div>
</div>