Modal

<div class="xl:container px-2 mx-auto text-center my-5" data-controller="lightbox">
  <template data-target="lightbox.template">
    <div class="lightbox">
      <button class="lightbox__close js-lightbox-close"><i class="icon icon--close "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-close"></use></svg></i></button>
      <div class="lightbox__content">
        {{{ content }}}
        <p class="lightbox__content-caption">{{ caption }}</p>
        {{# prev }}
          <button class="lightbox__prev js-lightbox-prev"><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use></svg></i></button>
        {{/ prev }}
        {{# next }}
          <button class="lightbox__next js-lightbox-next"><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"><use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use></svg></i></button>
        {{/ next }}
      </div>
    </div>
  </template>
  <button data-tag="Click to open modal" data-action="lightbox#open" data-content="http://via.placeholder.com/4000x1000" data-type="image" class="js-lightbox-trigger">
    <img src="http://via.placeholder.com/768x256" alt="">
  </button>
</div>