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



<div data-animation_name="{{ block.settings.animation_name }}" data-animation_delay="{{ block.settings.animation_delay }}" class="{% if block.settings.animation_name != 'noeffect' %}scroll_animation {% endif %}{{block.settings.imgtxt_GridWidth}} flexItem grid_sections text-{{block.settings.txt_Align1}}" style="padding: 0px; border: 0px; margin: 0px; background: rgba({{ hex2rgb_r  }},{{ hex2rgb_g  }},{{ hex2rgb_b  }}, {{ block.settings.bg_color_imgtxt }});animation-duration: {{ block.settings.animation_duration }};">
  <div class="grid_sections" style ="padding: {{block.settings.imgtxt_PaddingTop}}px {{block.settings.imgtxt_PaddingRight}}px {{block.settings.imgtxt_PaddingBottom}}px {{block.settings.imgtxt_PaddingLeft}}px;" style_desktop ="padding: {{block.settings.imgtxt_PaddingTop}}px {{block.settings.imgtxt_PaddingRight}}px {{block.settings.imgtxt_PaddingBottom}}px {{block.settings.imgtxt_PaddingLeft}}px;" style_mobile ="padding: {{block.settings.mob_imgtxt_PaddingTop}}px {{block.settings.mob_imgtxt_PaddingRight}}px {{block.settings.mob_imgtxt_PaddingBottom}}px {{block.settings.mob_imgtxt_PaddingLeft}}px;" >
    <div>

      {% if block.settings.imgtext_title_id != blank %}
      <h{{block.settings.imgtext_title_heading_tag}} style="color:{{block.settings.imgtext_title_color}}; text-align:{{block.settings.imgtext_head_txtalign}}">{{block.settings.imgtext_title_id}}</h{{block.settings.imgtext_title_heading_tag}}>
      {% endif %}

      {% if block.settings.imgtext_subtitle_id != blank %}
      <h{{block.settings.imgtext_subtitle_heading_tag}} style="color:{{block.settings.imgtext_subtitle_color}};text-align:{{block.settings.imgtext_subhead_txtalign}}">{{block.settings.imgtext_subtitle_id}}</h{{block.settings.imgtext_title_subheading_tag}}> 
      {% endif %}


    </div>
    <div class="contnet_grid_html {% if block.settings.text_color_imgtxt != blank %}no_general_content{% endif %}" style="color: {{block.settings.text_color_imgtxt}};  ">
      <div class="cover_div">
        {% if block.settings.GridImageLink1 != blank %}<a href="{{block.settings.GridImageLink1}}">{% endif %}
        {% if block.settings.gridimgtxt != blank %}  
        {% if settings.image_loading_type == 'lazy' %}
        <img alt="{{ block.settings.gridimgtxt_alt }}" data-sizes="auto" class="lazyloadimage lazyload blur-up" src="{{ block.settings.gridimgtxt | img_url:'100x' }}" data-src="{{ block.settings.gridimgtxt | img_url:'' }}" >
        {% else %}
        <img alt="{{ block.settings.gridimgtxt_alt }}" src="{{ block.settings.gridimgtxt | img_url:'' }}" >
        {% endif %}

        {% endif %}
        {% if block.settings.GridImageLink1 != blank %}</a>{% endif %}

        {% if block.settings.gridimgtxtBtn != blank %}
        <div class="grid_inner_button text-{{block.settings.imgtxt_BtnPosition}}"><a class="button scroll_link_trigger" href="{{block.settings.gridimgtxtBtnLink}}">{{block.settings.gridimgtxtBtn}}</a></div>
        {% endif %}
      </div>
      <div class="grid_html_color">

        {{ block.settings.gridimgtxtt }}
        {% if block.settings.gridimgtxttBtn != blank %}
        <div class=" text-{{block.settings.imgtxtt_BtnPosition}}"><a class="button scroll_link_trigger" href="{{block.settings.gridimgtxttBtnLink}}">{{block.settings.gridimgtxttBtn}}</a></div>
        {% endif %}
      </div>
    </div>
    {% if block.settings.product_grid_5 != blank %}
    {%- assign product = all_products[block.settings.product_grid_5] -%}
    {%include 'gird-product' varation_type: block.settings.product_variants_5 %}
    {% endif %}
  </div>
</div>