{{ collapse-height = collapse-height ?? 375 }}
{{ display-image-as-bg = !below_image_content.text }}
<div
    class="
        card flex flex-col md:flex-row items-stretch bg-white w-full rounded-xl overflow-hidden
        {{ if placement === 'right' }} md:flex-row-reverse {{ /if }}
        {{ if mb }} mb-8 {{ /if }}
    "
    :class="{ 'expanded': expanded }"
    x-data="{
        expanded: false,
        showReadButton() {
            return !this.expanded ? this.$refs.content.clientHeight > {{ collapse-height }} : true
        }
    }"
>
    {{ image }}
        <div
            class="
                img-col md:w-2/5 flex-shrink-0 relative overflow-hidden
                bg-no-repeat bg-cover md:bg-[length:100%_auto] force-bg-center-on-mobile
                {{ if image-bg-color }} bg-{{ convert_color:hex_to_name :hex-code="image-bg-color" }} {{ /if }}
            "
            {{ if display-image-as-bg }} style="background-image: url('{{ url }}'); background-position: {{ focus_css }};" {{ /if }}
        >
            <div class="min-h-[250px] md:min-h-full" {{ if expandable }} x-show="expanded" x-collapse.min.250px {{ /if }}>
                <img
                    src="{{ url }}"
                    alt="{{ alt }}"
                    class="w-full {{ if display-image-as-bg }} absolute h-full opacity-0 {{ /if }}"
                />

                {{ if below_image_content.table }}
                    <table class="table-fixed w-full">
                        {{ below_image_content.table }}
                            {{ row_index = index }}
                            <tr>
                                {{ cells }}
                                    {{ if row_index === 0  }}
                                        <th class="bg-beige px-0.5 py-2 text-red uppercase font-normal font-headline text-[0.65rem] leading-3">{{ value }}</th>
                                    {{ else }}
                                        <td class="bg-white px-0.5 py-2 text-xs">{{ value }}</td>
                                    {{ /if }}
                                {{ /cells }}
                            </tr>
                        {{ /below_image_content.table }}
                    </table>
                {{ /if }}

                {{ if below_image_content.text }}
                    <div class="hidden md:block text-left bg-red p-5 lg:px-6 md:pb-16">
                        {{ partial:components/text-wrapper bg-color="red" :text="below_image_content.text|markdown" }}
                    </div>
                {{ /if }}
            </div>
        </div>
    {{ /image }}

    <div class="px-5 md:px-6 lg:px-10 py-8 text-left relative" {{ if expandable }} :class="{ 'md:pb-0': !expanded }" {{ /if }}>
        <div
            {{ if expandable }} x-show="expanded" x-collapse.min.250px class="lg:min-h-[19rem]" {{ /if }}
        >
            <div x-ref="content">
                {{ slot }}

                {{ if below_image_content.text }}
                    <div class="md:hidden text-left bg-red p-5 lg:px-6 md:pb-16 -mx-5 mt-5 mb-2">
                        {{ partial:components/text-wrapper bg-color="red" :text="below_image_content.text|markdown" }}
                    </div>
                {{ /if }}

                {{ if expandable }}
                    <div
                        class="absolute bottom-0 right-0 text-right w-full pt-12 pb-1 px-4"
                        :class="{ 'bg-gradient-to-t from-white from-30%': !expanded }"
                        x-show="showReadButton()"
                    >
                        <button
                            type="button"
                            class="text-red hover:text-black font-headline uppercase"
                            x-text="expanded ? 'Read Less' : 'Read More'"
                            @click="expanded = !expanded"
                        >
                    </div>
                {{ /if }}
            </div>
        </div>
    </div>
</div>