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

<section class="md:min-h-screen grid md:landscape:grid-cols-5 {% if has_bordered_text %}gap-4{% else %}gap-12{% endif %} gap-12 grid-cols-1 {% unless include.background_image %} bg-[#F5F7F5] {% endunless %} {% if include.outside_spacing_desktop == 'small' %}md:padding-sm {% elsif include.outside_spacing_desktop == 'large' %} md:padding{% endif %}{% if include.outside_spacing_mobile == 'small' %} padding-sm {% elsif include.outside_spacing_mobile == 'large' %} padding{% endif %} bg-cover bg-center" style="background-image: url('{{include.background_image}}');">

    {% for item in include.column_style %}
    {% if item._type == 'text' %}
    <div class="md:landscape:col-span-2 {% 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 md:min-h-auto min-h-60">
        
        <div class="flex flex-col {% if item.text_spacing == 'separated' %}justify-between flex-grow {% elsif item.text_spacing == 'normal' %}{% endif %}"
        data-aos="fade-in">
            <div class="{% if item.heading.add_border %}border-b border-black pb-5{% endif %} mb-8">
                <div class="{% if item.text_position == 'left' %}text-left {% elsif item.text_position == 'right' %} text-right{% endif %} {% 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-[50%] {% if item.text_position == 'left' %}ml-0 {% elsif item.text_position == 'right' %}ml-auto{% endif %}">
                    <h2 class="{% if item.heading.font_style == 'sans' %}title-lg{% elsif item.heading.font_style == 'handwritten' %}accent-lg{% endif %}">{{item.heading.heading}}</h2>
                </div>
                
            </div>
            
            <div class="md:w-[90%]">
                {{item.body_text_html}}
                {% if item.button_text and item.button_url %}
                <a href="{{item.button_url}}" class="button-dark">{{item.button_text}}</a>
                {% endif %}
            </div>
        
        </div>
    </div>

    {% elsif item._type == 'single-image' %}
    <div class="md:landscape:col-span-3 relative {% if item.add_border %}border border-black rounded-xl {% endif %} {% 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"
    data-aos="fade-in">
        <img src="{{item.image}}" alt="{{item.image_alt_text}}" class="{% if item.image_crop == 'never-crop' %}object-contain {% elsif item.image_crop == 'fill-space' %} object-cover {% endif %} object-center md:landscape:absolute md:landscape:inset-0 w-full md:landscape:h-full md:portrait:h-60 {% if item.image_crop == 'never-crop' %} h-0 {% elsif item.image_crop == 'fill-space' %}h-70{% endif %} rounded-xl">
    </div>   
    {% endif %}
    {% endfor %}
</section>