Use bootstrap variables

contribute/template.en.xhtml

@@ -280,7 +280,6 @@
       <p>
         You can also have figures left or right within the text flow.
         Just apply the classes <code>float-right</code> or <code>float-right</code> on them.
-        Here you won't use the wrapping DIV element.
       </p>
 
       <p>

look/elements/figure.less

@@ -19,7 +19,7 @@ figure {
 
   .figcaption,
   figcaption {
-    background-color: #eee;
+    background-color: @gray-lighter;
     caption-side: bottom;
     display: table-caption;
     font-size: .9em;
@@ -30,7 +30,7 @@ figure {
   }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: @screen-md-min) {
   figure,
   .figure {
     margin: 30px auto 40px;