{% if include.slider.size > 3 %}
<div class="flex items-stretch gap-4 overflow-x-scroll scrollbar padding-sm bg-light" data-aos="fade-in">
    {% for item in include.slider %}
    <div class="relative lg:landscape:min-w-[27vw] md:portrait:min-w-[45vw] min-w-[75vw] rounded-xl border border-black flex flex-col">
        <img src="{{item.image}}" alt="{{item.image_alt_text}}" class="object-cover object-center lg:landscape:h-[35vh] md:portrait:h-20 h-50 w-full rounded-t-[0.7rem]">
        <div class="md:p-5 px-3 py-6 flex flex-col flex-grow items-start">
            <h2 class="mt-4 mb-4 font-sans uppercase border-b border-black pb-5 w-full md:block hidden">{{item.uppercase_heading}}</h2>
            <p class="title-md lg:w-[90%] mb-20">{{item.short_heading}}</p>
            <p>{{item.short_paragraph}}</p>
            <a href="{{item.button_url}}" class="button-dark mt-auto">{{item.button_text}}</a>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="md:landscape:grid md:landscape:grid-cols-3 grid-cols-1 gap-4 padding-sm bg-light hidden" data-aos="fade-in">
    {% for item in include.slider %}
    <div class="relative rounded-xl border border-black flex flex-col">
        <img src="{{item.image}}" alt="{{item.image_alt_text}}" class="object-cover object-center lg:landscape:h-[35vh] md:portrait:h-20 h-50 w-full rounded-t-[0.7rem]">
        <div class="md:p-5 px-3 py-6 flex flex-col flex-grow items-start">
            <h2 class="mt-4 mb-4 font-sans uppercase border-b border-black pb-3 w-full md:block hidden">{{item.uppercase_heading}}</h2>
            <p class="title-md lg:w-[90%] mb-20">{{item.short_heading}}</p>
            <p>{{item.short_paragraph}}</p>
            <a href="{{item.button_url}}" class="button-dark mt-auto">{{item.button_text}}</a>
        </div>
    </div>
    {% endfor %}
</div>

<!-- ipad and mob -->
<div class="md:landscape:hidden flex items-stretch gap-4 overflow-x-scroll scrollbar padding-sm bg-light" data-aos="fade-in">
    {% for item in include.slider %}
    <div class="relative lg:landscape:min-w-[27vw] md:portrait:min-w-[45vw] min-w-[75vw] rounded-xl border border-black flex flex-col">
        <img src="{{item.image}}" alt="{{item.image_alt_text}}" class="object-cover object-center lg:landscape:h-[35vh] md:portrait:h-40 h-50 w-full rounded-t-[0.7rem]">
        <div class="md:p-5 px-3 py-6 flex flex-col flex-grow items-start">
            <h2 class="mt-4 mb-4 font-sans uppercase border-b border-black pb-3 w-full md:landscape:block hidden">{{item.uppercase_heading}}</h2>
            <p class="title-md lg:w-[90%] mb-20">{{item.short_heading}}</p>
            <p>{{item.short_paragraph}}</p>
            <a href="{{item.button_url}}" class="button-dark mt-auto">{{item.button_text}}</a>
        </div>
    </div>
    {% endfor %}
</div>

{% endif %}