Галерея лайтбоксов внутри модального окна

Question

Когда я открываю модальное окно, я хочу иметь лайтбокс в моей галерее, которая находится в модальном. Однако, когда я нажимаю на изображение, чтобы запустить лайтбокс, ничего не происходит, и когда я закрываю модальное окно, лайтбокс открывается. Вероятно, он открывается за модал. Любые идеи о том, как сделать лайтбокс поверх модального окна?

<div class="row pt-2">

  <!-- Grid column -->
  <div class="col-md-4 mb-4">
    <img src="images/beauty.png" alt="beauty" class="ikonka2">

    <h5 class="font-weight-bold my-4 text-uppercase">Permament Make-up</h5>
    <p class="second-font mb-sm-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.
    </p>
    <a id="demo02" href="#animatedModal2" class="demo">More info</a>
    <div id="animatedModal2">
      <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->

      <div class="close-animatedModal2 py-3" style="background-color:#fff;">
        <div class="outer">
          <div class="inner">
            <label class="label2">Back</label>
          </div>
        </div>

      </div>

      <div class="modal-content">
        <div class="container py-2">
          <div class="row gallery-container" id="lightgallery">
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery image-box" data-aos="fade" data-src="images/beauty/IMG_1087.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor doloremque hic excepturi fugit, sunt impedit fuga tempora, ad amet aliquid?</p>">
              <a href="#"><img src="images/beauty/IMG_1087.jpg" alt="Image1" class="img-fluid img-resize"></a>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery  image-box" data-aos="fade" data-src="images/beauty/IMG_1088.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam omnis quaerat molestiae, praesentium. Ipsam, reiciendis. Aut molestiae animi earum laudantium.</p>">
              <a href="#"><img src="images/beauty/IMG_1088.jpg" alt="Image2" class="img-fluid img-resize"></a>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery  image-box" data-aos="fade" data-src="images/beauty/IMG_1091.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem reiciendis, dolorum illo temporibus culpa eaque dolore rerum quod voluptate doloribus.</p>">
              <a href="#"><img src="images/beauty/IMG_1091.jpg" alt="Image3" class="img-fluid img-resize"></a>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery  image-box" data-aos="fade" data-src="images/beauty/IMG_1097.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim perferendis quae iusto omnis praesentium labore tempore eligendi quo corporis sapiente.</p>">
              <a href="#"><img src="images/beauty/IMG_1097.jpg" alt="Image4" class="img-fluid img-resize"></a>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 item img-gallery  image-box" data-aos="fade" data-src="images/beauty/IMG_1099.jpg" data-sub-html="<h4>Fading Light</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum voluptate tempore aliquam, dolorem distinctio. In quas maiores tenetur sequi.</p>">
              <a href="#"><img src="images/beauty/IMG_1099.jpg" alt="Image5" class="img-fluid img-resize"></a>
            </div>

            <!--/main slider carousel-->
          </div>


          <!--Your modal content goes here-->