HTML

<div class="row row-cols-1 row-cols-md-3 js-pt-swipe">
    <div class="col mb-4 ">
        <div class="item item-gallery overflow-hidden position-relative">
            <a aria-label="link" class="sub-3-1 image-gallery me-2 icon-bg-action" href="img/instagram/instagram-1.jpg"
               data-caption="Gallery item"
               data-pswp-width="1800" data-pswp-height="1800">
               <img src="img/instagram/instagram-1.jpg" alt="img" class="w-100 img-fluid">
            </a>
        </div>
    </div>
    <div class="col mb-4 ">
        <div class="item item-gallery overflow-hidden position-relative">
            <a aria-label="link" class="sub-3-1 image-gallery me-2 icon-bg-action" href="img/instagram/instagram-2.jpg"
               data-caption="Gallery item"
               data-pswp-width="1800" data-pswp-height="1800">
                <img src="img/instagram/instagram-2.jpg" alt="img" class="w-100 img-fluid">
            </a>
        </div>
    </div>
    <div class="col mb-4 ">
        <div class="item item-gallery overflow-hidden position-relative">
            <a aria-label="link" class="sub-3-1 image-gallery me-2 icon-bg-action" href="img/instagram/instagram-3.jpg"
               data-caption="Gallery item"
               data-pswp-width="1800" data-pswp-height="1800">
                <img src="img/instagram/instagram-3.jpg" alt="img" class="w-100 img-fluid">
            </a>
        </div>
    </div>
    <div class="col mb-4 ">
        <div class="item item-gallery overflow-hidden position-relative">
            <a aria-label="link" class="sub-3-1 image-gallery me-2 icon-bg-action" href="img/instagram/instagram-4.jpg"
               data-caption="Gallery item"
               data-pswp-width="1800" data-pswp-height="1800">
                <img src="img/instagram/instagram-4.jpg" alt="img" class="w-100 img-fluid">
            </a>
        </div>
    </div>
    <div class="col mb-4 ">
        <div class="item item-gallery overflow-hidden position-relative">
            <a aria-label="link" class="sub-3-1 image-gallery me-2 icon-bg-action" href="img/instagram/instagram-5.jpg"
               data-caption="Gallery item"
               data-pswp-width="1800" data-pswp-height="1800">
                <img src="img/instagram/instagram-5.jpg" alt="img" class="w-100 img-fluid">
            </a>
        </div>
    </div>
    <div class="col mb-4 ">
        <div class="item item-gallery overflow-hidden position-relative">
            <a aria-label="link" class="sub-3-1 image-gallery me-2 icon-bg-action" href="img/instagram/instagram-6.jpg"
               data-caption="Gallery item"
               data-pswp-width="1800" data-pswp-height="1800">
                <img src="img/instagram/instagram-6.jpg" alt="img" class="w-100 img-fluid">
            </a>
        </div>
    </div>

    <script type="module">
        import PhotoSwipeLightbox from './js/photo-swipe/photoswipe-lightbox.esm.min.js';

        const lightbox = new PhotoSwipeLightbox({
            gallery: '.js-pt-swipe',
            children: '.image-gallery',
            pswpModule: () => import('./js/photo-swipe/photoswipe.esm.min.js')
        });
        lightbox.init();
    </script>
</div>