{{ header }}
<style type="text/css">
  .gallery.row a {
     display: flex;
}
</style>
<link href="css/simple-lightbox.min.css" rel="stylesheet" />
  <div class="inner-wrap pt-4 gallery-wrap">
      <div class="container">
          <div class="row">
              <div class="col-md-12 mb-3">
                  <h2>{{ gallery.title }}</h2>
              </div>  
          </div>
          <div id="nanogallery2">
            <div class="gallery row">

            	{% for image in images %}
                <a class="col-sm-3 col-lg-2" href="image/{{image.image}}"><img class="img-fluid img-thumbnail" src="image/{{image.image}}" alt="{{ gallery.title }}" title="{{ gallery.title }}"/></a>
                {% endfor %}
            </div>
         </div>
      </div>
  </div>

  
{{ footer }}

  <script>
      var lightbox = $('.gallery a').simpleLightbox({ /* options */ });
  </script>
   <style type="text/css">
    .gallery img {
        width: 150px;
        border: none;
    }

    .gallery.row a {
        padding: 20px;
        border: 1px solid #ccc;
        text-align: center;
        margin-left: 15px;
        margin-bottom: 15px;
    }
    .gallery-wrap img.img-fluid{
    	margin-bottom: 0;
    }
  </style>