improve dealing with small images

layouts/shortcodes/figure.html

@@ -33,6 +33,7 @@
 {{- end -}}
 
 <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+  <div class="snap-wrapper">
     {{ if (.Get "link") -}}
       <a href="{{ .Get "link" }}"
          {{- with .Get "target" }} target="{{ . }}"{{ end -}}
@@ -80,4 +81,5 @@
         <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
       {{- end }}
     </div>
+  </div>
 </figure>

static/css/snap-gallery.css

@@ -10,7 +10,12 @@ figure {
   margin: 30px auto 40px;
   display: block;
   text-align: center;
+}
+
+/* make box with box-shadow only as large as image */
+.snap-wrapper {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  display: inline-block;
 }
 
 figure a:hover {
@@ -59,6 +64,11 @@ figure figcaption {
   flex-wrap: wrap;
 }
 
+/* avoid sick effects of inline-block on gallery elements */
+.snap-gallery .snap-wrapper {
+  display: block;
+} 
+
 .snap-gallery figure {
   position: relative;
   width: 30%;