Modal Image Text

<div x-data="hyva.modal()">
    <button type="button" class="btn btn-solid btn-size-lg btn-dark" @click="show('modal', $event)">
        Show Modal
    </button>

    <div x-cloak x-bind="overlay('modal')" x-spread="overlay('modal')" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex md:items-center">
        <div class="fixed inset-x-0 max-md:h-full md:container grid-layout justify-center items-center text-left z-40">
            <div x-ref="modal" role="dialog" aria-modal="true" class="
                    relative inline-block bg-white shadow-32 max-h-screen overflow-auto overscroll-y-contain h-full
                    col-span-4 sm:col-span-12 md:col-span-8 md:col-start-3
                ">
                <button type="button" @click="hide('modal')" aria-label="Label text" class="absolute top-4 right-4 z-10  btn  btn-neutral  btn-outline  btn-size-sm btn-only-icon">
                    <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg>

                </button>
                <div class="flex flex-col xl:flex-row items-center gap-y-6 h-full">
                    <div class="h-full flex-1">
                        <img src="../../img/modals/img_1.png" alt="random" class="aspect-[3/4] w-auto h-full object-cover" loading="lazy" />
                    </div>
                    <div class="flex flex-col text-center gap-4 m-6 xl:m-8 3xl:m-10 max-md:max-w-[328px] md:w-[424px] xl:w-[432px] 3xl:w-[596px]">
                        <div class="flex flex-col gap-2">
                            <div class="h4">Black Friday : 10% off</div>
                            <div class="h6 text-black/64">Get a discount on all items in your next order</div>
                        </div>
                        <p class="text-black/72 text-body-sm">
                            Offre disponible jusqu’au 30/12/2025 pour l’achat de 2 produits Etat Pur
                        </p>
                        <button type="button" class="m-auto  btn  btn-dark  btn-solid  btn-size-lg">
                            Découvrir nos produits

                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>