add caption on slideshow and lightbox

assets/scss/snap-gallery.scss

@@ -82,7 +82,12 @@ $gap: var(--gap);
     /* stretch line height */
     height: 100%;
   }
+}
 
+// Disable cursor selection in lightbox and on slideshow, especially controls
+.snap-lightbox,
+.snap-slideshow {
+  user-select: none;
 }
 
 // /* Click on the complete background closes the lightbox */
@@ -123,17 +128,37 @@ $gap: var(--gap);
   }
 }
 
-/* Number text (1/3 etc) */
-.snap-lightbox,
-.snap-slideshow {
-  user-select: none;
+/* Number text (1/3 etc) and captions*/
+.snap-numbertext {
+  position: absolute;
+  color: #f2f2f2;
+  background-color: #000;
+  font-size: 12px;
+  padding: 8px 12px;
+}
 
-  .numbertext {
-    color: #f2f2f2;
-    background-color: #000;
-    font-size: 12px;
-    padding: 8px 12px;
+.snap-caption {
+  bottom: 0;
+  color: #f2f2f2;
+  padding: 8px 0;
+  left: 10%;
+  width: 80%;
+  text-shadow: 1px 1px 10px #000;
+  font-weight: 700;
+  font-size: 1.1em;
+  text-align: center;
+
+  // As slideshow, position on picture on mid-screens and wider
+  .snap-slideshow & {
     position: absolute;
+
+    @media screen and (max-width: 767px) {
+      display: none;
+    }
+  }
+  // In lightbox, always show below picture
+  .snap-lightbox & {
+    position: relative;
   }
 }