How can I add a caption to an image gallery by editing this existing code?

Question

I found this gallery online where at the moment I have some images with a preview of a title (class="project-category") and description (class="project-name"). When the popup is activated, the number of the image appears at the bottom right. I would also like the image description (class="project-name") to be displayed in the popup (at the bottom of the image). Can anyone help me modify the code below to achieve this display?

$('#portfolio').magnificPopup({
  delegate: 'a',
  type: 'image',
  tLoading: 'Loading image #%curr%...',
  mainClass: 'mfp-img-mobile',
  gallery: {
    enabled: true,
    navigateByImgClick: true,
    preload: [0, 1]
  },
  image: {
    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" />
<div id="portfolio">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" href="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%201">
          <img class="img-fluid" src="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%201" alt="" />
          <div class="portfolio-box-caption">
            <div class="project-category text-white-50">Lorem ipsum</div>
            <div class="project-name">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa mauris, rutrum et erat nec, dapibus pretium enim. Nullam non felis ut tortor euismod mattis vel id libero. Duis eget justo rutrum elit aliquam vestibulum. Sed sem sem, pulvinar
              et sapien eu, varius gravida dui.</div>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" href="https://via.placeholder.com/500/FF0000/FFFFFF?text=Image%202">
          <img class="img-fluid" src="https://via.placeholder.com/500/FF00DD/FFFFFF?text=Image%202" alt="" />
          <div class="portfolio-box-caption">
            <div class="project-category text-white-50">Lorem ipsum</div>
            <div>
              <h6 class="project-name"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean massa mauris, rutrum et erat nec, dapibus pretium enim. Nullam non felis ut tortor euismod mattis vel id libero. Duis eget justo rutrum elit aliquam vestibulum. Sed sem sem,
                pulvinar et sapien eu, varius gravida dui.</h6>
            </div>
          </div>
        </a>
      </div>