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

<section class="bg-cover bg-center" style="background-image: url('{{include.background_image}}');">
    <div class="md:min-h-screen grid md:landscape:grid-cols-2 {% if has_bordered_text %}gap-4{% else %}gap-8{% endif %} gap-12 grid-cols-1 {% unless include.background_image %} bg-light {% endunless %} {% if include.outside_spacing_desktop == 'small' %}md:landscape:padding-sm {% elsif include.outside_spacing_desktop == 'large' %} md:landscape:padding{% endif %} {% if include.outside_spacing_mobile == 'small' %} padding-sm {% elsif include.outside_spacing_mobile == 'large' %} padding{% endif %} 2xl:container 2xl:mx-auto" data-aos="fade-in">

    {% for item in include.columns %}
    {% if item._type == 'text' %}
    <div class="{% if item.add_border %}border border-black rounded-xl md:px-5 px-3 py-12{% endif %} {% if item.mobile_order %}
    order-{{ item.mobile_order }}{% else %} order-none{% endif %} md:landscape:order-none flex flex-col justify-between">
        <div class="{% if item.top_right_text.paragraph_width_desktop == 'tight' %} md:landscape:w-[35%] {% elsif item.top_right_text.paragraph_width_desktop == 'normal' %} md:landscape:w-[55%] {% endif %} w-[70%] ml-auto text-right mb-12 {% if item.top_right_text.add_bottom_spacing %}md:mb-40 mb-28{% endif %} ">
            {{item.top_right_text.paragraph_html}}
        </div>
        <div>
            <div class="{% if item.heading.add_border %}border-b border-black pb-5{% endif %} mb-8 flex items-center justify-between {% if item.body_text.no_of_columns == 'two-with-border' %}md:landscape:flex hidden{% endif %}">
                <h2 class="{% if item.heading.heading_size == 'large' %}title-lg {% elsif item.heading.heading_size == 'small' %}font-sans{% endif %} {% if item.heading.uppercase %} uppercase {% endif %}mb-0 md:landscape:w-[55%] w-[75%]">{{item.heading.text}}</h2>
                {% if item.heading.button_text and item.heading.button_url %}
                <a href="{{item.heading.button_url}}" class="button-dark">{{item.heading.button_text}}</a>
                {% endif %}
            </div>
            
            {% if item.body_text.no_of_columns == 'one' %}
            <div class="md:w-3/4">
                {{item.body_text.column_one_html}}
                {% if item.body_text.button_text and item.body_text.button_url %}
                <a href="{{item.body_text.button_url}}" class="button-dark">{{item.body_text.button_text}}</a>
                {% endif %}
            </div>
            {% elsif item.body_text.no_of_columns == 'two' %}
            <div class="grid md:landscape:grid-cols-2 gap-8 grid-cols-1">
                <div>
                    {{item.body_text.column_one_html}}
                </div>
                <div>
                    {{item.body_text.column_two_html}}
                    {% if item.body_text.button_text and item.body_text.button_url %}
                    <a href="{{item.body_text.button_url}}" class="button-dark">{{item.body_text.button_text}}</a>
                    {% endif %}
                </div>
        
            </div>
            {% elsif item.body_text.no_of_columns == 'two-with-border' %}
            <div class="grid md:landscape:grid-cols-2 md:gap-12 gap-8 grid-cols-1">
                <!-- mob show bordered div first -->
                <div class="border-y border-black md:landscape:hidden">
                    <div class="border border-black rounded-xl px-3 py-8 my-8 md:landscape:hidden">
                        <span class="block h-4 w-4 rounded-full bg-black float-right"></span>
                        {{item.body_text.column_two_html}}
                    </div>
                </div>

                <div>
                    {{item.body_text.column_one_html}}
                    {% if item.body_text.button_text and item.body_text.button_url %}
                    <a href="{{item.body_text.button_url}}" class="button-dark">{{item.body_text.button_text}}</a>
                    {% endif %}
                    <a href="{{item.heading.button_url}}" class="button-dark md:landscape:hidden inline-block">{{item.heading.button_text}}</a>
                </div>
                <div class="border border-black rounded-xl md:px-5 px-3 py-8 md:landscape:block hidden">
                    <span class="block h-4 w-4 rounded-full bg-black float-right"></span>
                    {{item.body_text.column_two_html}}
                </div>
                
            </div>
            {% endif %}
        </div>
    </div>

    {% elsif item._type == 'image' %}
    <div class="relative {% if item.hide_on_mobile %}hidden md:landscape:block{% endif %}{% if item.mobile_order %}
    order-{{ item.mobile_order }}{% else %} order-none{% endif %} md:landscape:order-none">
        <img src="{{item.image}}" alt="{{item.image_alt_text}}" class="object-cover object-center md:landscape:absolute md:landscape:inset-0 w-full md:landscape:h-full md:portrait:h-60 h-80 rounded-xl"
        data-aos="fade-in">
    </div>
    {% endif %}
    {% endfor %}
    </div>
</section>