{% assign has_bordered_text = false %}
{% for item in include.columns %}
  {% 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 md:px-0 px-5{% else %} xl:landscape:gap-12 {% endif %} lg:px-12 md:px-8 {{include.settings.desktop_top_padding}} {{include.settings.desktop_bottom_padding}} {{include.settings.mobile_top_padding}} {{include.settings.mobile_bottom_padding}}">

    {% for item in include.columns %}
    {% if item._type == 'image' %}
    <div class=" border border-medium relative {% if has_bordered_text %} m-0 {% else %} lg:m-5 m-5 my-0 {% endif %} {% if item.settings.mobile_order == 'first' %} {% elsif item.settings.mobile_order == 'second' %} lg:row-start-auto row-start-2 {% endif %}">
        <img src="{{item.image}}" alt="{{item.image_alt_text}}" class="object-cover object-center md:landscape:absolute md:landscape:inset-0 md:landscape:h-full h-50 w-full p-5">
    </div>
    {% elsif item._type == 'text' %}
    <div class="px-5 md:py-md py-12 flex flex-col items-start justify-center {% if item.settings.mobile_order == 'first' %} lg:row-start-auto row-start-1 {% elsif item.settings.mobile_order == 'second' %} {% endif %} {% if item.settings.add_border %}border border-medium md:py-lg{% endif %}">
        {% if item.subtitle %}
        <p class="subtitle-sm">{{item.subtitle}}</p>
        {% endif %}
        <h2 class="heading-xl {% 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 w-fit">{{item.button_text}}</a>
        {% endif %}
    </div>
    {% endif %}
    {% endfor %}
</section>