{% assign has_bordered_text = false %}
{% for item in include.column_option %}
  {% if item._type == 'text' and item.settings.add_border %}
    {% assign has_bordered_text = true %}
  {% endif %}
{% endfor %}

<section id="{{include.section_id}}" class="grid lg:grid-cols-2 grid-cols-1 {% if has_bordered_text %}gap-5{% else %}md:gap-20 gap-12{% endif %} items-center lg:padding {% if include.settings.large_padding_top %} lg:pt-36 {% endif %} py-lg">
    {% for item in include.column_option %}
    {% if item._type == 'images' %}
    <div class="{% if item.settings.mobile_order == 'first' %} {% elsif item.settings.mobile_order == 'second' %} lg:row-start-auto row-start-2 {% endif %}">
        <div class="grid grid-cols-2 gap-2">
            <img src="{{item.top_left_image}}" alt="{{item.top_left_image_alt_text}}" class="object-cover object-center aspect-square p-2 border border-medium">
            <img src="{{item.top_right_image}}" alt="{{item.top_right_image_alt_text}}" class="object-cover object-center aspect-square p-2 border border-medium">
            <img src="{{item.bottom_left_image}}" alt="{{item.bottom_left_image_alt_text}}" class="object-cover object-center aspect-square p-2 border border-medium">
            <img src="{{item.bottom_right_image}}" alt="{{item.bottom_right_image_alt_text}}" class="object-cover object-center aspect-square p-2 border border-medium">
        </div>
    </div>
    {% elsif item._type == 'text' %}
    <div class="{% if item.settings.add_border %}py-md border border-medium {% else %} xl:py-lg {% endif %} flex-center-start {% if item.settings.mobile_order == 'first' %} lg:row-start-auto row-start-1 {% elsif item.settings.mobile_order == 'second' %} {% endif %}">
        {% if item.subtitle %}
        <p class="subtitle-sm">{{item.subtitle}}</p>
        {% endif %}
        <h2 class="heading-xl md:w-[85%] {% if item.settings.heading_in_uppercase%} uppercase{% endif %}">{{item.h2_heading}}</h2>
        {{item.paragraph_html}}
        {% if item.button_text and item.button_url %}
        <a href="{{item.button_url}}" class="button">{{item.button_text}}</a>
        {% endif %}
    </div>
    {% endif %}
    {% endfor %}
</section>