{% assign hex2rgb_r = '' %}
        {% assign hex2rgb_g = '' %}
        {% assign hex2rgb_b = '' %} 
        {% assign hex2rgb_hex = block.settings.bg_color_htmlimg %}
        {% 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.Html2_GridWidth}} flexItem grid_sections" style="padding: 0px; border: 0px; margin: 0px; background: rgba({{ hex2rgb_r  }},{{ hex2rgb_g  }},{{ hex2rgb_b  }}, {{ block.settings.bg_opacity_htmlimg }});animation-duration: {{ block.settings.animation_duration }};">  
        <div class="grid_sections" style =" padding: {{block.settings.Html2_PaddingTop}}px {{block.settings.Html2_PaddingRight}}px {{block.settings.Html2_PaddingBottom}}px {{block.settings.Html2_PaddingLeft}}px;" style_desktop =" padding: {{block.settings.Html2_PaddingTop}}px {{block.settings.Html2_PaddingRight}}px {{block.settings.Html2_PaddingBottom}}px {{block.settings.Html2_PaddingLeft}}px;" style_mobile ="padding: {{block.settings.mob_Html2_PaddingTop}}px {{block.settings.mob_Html2_PaddingRight}}px {{block.settings.mob_Html2_PaddingBottom}}px {{block.settings.mob_Html2_PaddingLeft}}px;">
            <div class="contnet_grid_html {% if block.settings.text_color_htmlimg != blank %}no_general_content{% endif %}" style=" color: {{block.settings.text_color_htmlimg}};">
              {{ block.settings.GridHtml2 }}
              {% if block.settings.GridHtml2Btn != blank %}
                <div class="grid_html_color text-{{block.settings.Html2_BtnPosition}}"><a class="button scroll_link_trigger" href="{{block.settings.GridHtml2BtnLink}}">{{block.settings.GridHtml2Btn}}</a></div>
              {% endif %}

                <div class="cover_div">
                  {% if block.settings.GridImageLink4 != blank %}<a href="{{block.settings.GridImageLink4}}">{% endif %}
                   {% if block.settings.GridImg3 %}
                    {% if settings.image_loading_type == 'lazy' %}
                        <img  alt="{{ block.settings.GridImg3_alt }}" data-sizes="auto" class="lazyloadimage lazyload blur-up" src="{{ block.settings.GridImg3 | img_url:'100x' }}" data-src="{{ block.settings.GridImg3 | img_url:'' }}" >
                     {% else %}
                        <img  alt="{{ block.settings.GridImg3_alt }}" src="{{ block.settings.GridImg3 | img_url:'' }}" >
                      {% endif %}
                    
                  {% endif %}
                  {% if block.settings.GridImageLink4 != blank %}</a>{% endif %}
                  {% if block.settings.GridImg3Btn != blank %}
                      <div class="grid_inner_button text-{{block.settings.Img3_BtnPosition}}"><a class="button scroll_link_trigger" href="{{block.settings.GridImg3BtnLink}}">{{block.settings.GridImg3Btn}}</a></div>
                  {% endif %}
                </div>
            </div>
               {% if block.settings.product_grid_11 != blank %}
                {%- assign product = all_products[block.settings.product_grid_11] -%}
                {%include 'gird-product' varation_type: block.settings.product_variants_11 %}
              {% endif %}
        </div>
    </div>