look/elements/figure.less

@@ -1,36 +1,38 @@
 .figure,
 figure {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
   display: table;
   margin: 20px auto 30px;
-  position: relative;
   max-width: 100%;
-
-  &:after {
-    bottom: 0;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
-    0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    content: '';
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 500;
-  }
+  position: relative;
 
   video {
     width: 100%;
+
+    + .figcaption,
+    + figcaption {
+      // fix video spacing
+      margin-top: -5px;
+
+      @media screen and (-webkit-min-device-pixel-ratio:0) {
+        margin-top: -6px;
+      }
+    }
   }
 
   .figcaption,
   figcaption {
     background-color: @gray-lighter;
-    caption-side: bottom;
-    display: table-caption;
+    display: block;
     font-size: .9em;
     padding: 10px;
     position: relative;
     text-align: center;
-    z-index: 1000;
+
+    p:last-of-type {
+      margin: 0;
+    }
   }
 }