Change Gallery Design & Add Video into Gallery

static/css/hugo-easy-gallery.css

@@ -9,8 +9,6 @@ Grid Layout Styles
 */
 .gallery {
     overflow: hidden;
-    margin: 10px;
-    max-width: 768px;
 }
 .gallery .box {
     float: left;
@@ -19,26 +17,24 @@ Grid Layout Styles
     width: 100%;
     padding-bottom: 100%; 
 }
-@media only screen and (min-width : 365px) {
-    /* Tablet view: 2 tiles */
-    .gallery .box {
-        width: 50%;
-        padding-bottom: 50%;
-    }
+
+.gallery .twoTilesBoxes {
+    float: left;
+    position: relative;
+    width: 50%;
+    padding-bottom: 50%;
 }
-@media only screen and (min-width : 480px) {
-    /* Small desktop / ipad view: 3 tiles */
-    .gallery .box {
-        width: 33.3%;
-        padding-bottom: 33.3%; /*  */
-    }
+
+.gallery .threeTilesBoxes {
+    float: left;
+    position: relative;
+    width: 33.3%;
+    padding-bottom: 33.3%; /*  */
 }
-@media only screen and (min-width : 9999px) {
-   /* Medium desktop: 4 tiles */
-   .box {
-      width: 25%;
-      padding-bottom: 25%;
-   }
+
+.gallery .fourTilesBoxes {
+    width: 25%;
+    padding-bottom: 25%;
 }
 
 /*

static/css/ozk.css

@@ -30,10 +30,30 @@ img[alt=LogoAbout] {
   padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
 }
   
-iframe{
+iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+figure { 
+  margin: 0px;
+}
+
+.marginHorizontal {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.galleryMarginHorizontal {
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-bottom: 5px;
+}
+
+.leaflet-map {
+  margin-left: 20px;
+  margin-right: 20px;
 }