{% load wagtailimages_tags %}

<section class="photo-gallery py-5">
    <div class="container">
        <div class="row row-cols-1 row-cols-md-{{ self.columns }} g-4 gallery-grid">
            {% for image in self.images %}
                <div class="col">
                    <a class="gallery-item" href="{{ image.url }}" data-lightbox="gallery">
                        {% image image fill-400x300 class="img-fluid" %}
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
{% endblock %}