margin between images

static/assets/css/main.css

@@ -266,7 +266,7 @@ body.modal-active #wrapper:after { -moz-pointer-events: auto; -webkit-pointer-ev
 body.loading #wrapper:before { -moz-transition: opacity 1s ease-out !important; -webkit-transition: opacity 1s ease-out !important; -ms-transition: opacity 1s ease-out !important; transition: opacity 1s ease-out !important; -moz-transition-delay: 0.3s !important; -webkit-transition-delay: 0.3s !important; -ms-transition-delay: 0.3s !important; transition-delay: 0.3s !important; opacity: 0.25; top: 50%; visibility: visible; }
 
 /* Header */
-body { padding: 0 0 4em 0; }
+body { padding: 0 0 0 0; }
 
 #header { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -moz-transition: -moz-transform 1s ease; -webkit-transition: -webkit-transform 1s ease; -ms-transition: -ms-transform 1s ease; transition: transform 1s ease; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; background: #1f2224; top: 0; height: 4em; left: 0; line-height: 4em; padding: 0 1.5em; position: static; user-select: none; width: 100%; z-index: 10002; }
 body.loading #header { -moz-transform: translateY(-4em); -webkit-transform: translateY(-4em); -ms-transform: translateY(-4em); transform: translateY(-4em); }
@@ -281,12 +281,15 @@ body.loading #header { -moz-transform: translateY(-4em); -webkit-transform: tran
 #header nav > ul > li a:hover { color: #ffffff !important; }
 #header nav > ul > li a.active { background-color: #242629; }
 
-@media screen and (max-width: 736px) { body { padding: 4em 0 0 0; }
+@media screen and (max-width: 736px) { body { padding:  0 0 0; }
   #header { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); bottom: auto; height: 4em; padding: 0 1em; top: 0; }
   body.loading #header { -moz-transform: translateY(-3.4em); -webkit-transform: translateY(-3.4em); -ms-transform: translateY(-3.4em); transform: translateY(-3.4em); }
   #header h1 { font-size: 0.9em; }
   #header nav > ul > li a { font-size: 0.9em; padding: 0 1.15em; } }
 /* Main */
+#main .thumb {
+  margin: 0 0 10px 10px;
+}
 #main { -moz-transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, -moz-filter 0.3s ease; -webkit-transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, -webkit-filter 0.3s ease; -ms-transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, -ms-filter 0.3s ease; transition: -moz-filter 0.3s ease, -webkit-filter 0.3s ease, -ms-filter 0.3s ease, filter 0.3s ease; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
 #main .thumb { -moz-transition: opacity 0.6s ease-in-out; -webkit-transition: opacity 0.6s ease-in-out; -ms-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; -moz-pointer-events: auto; -webkit-pointer-events: auto; -ms-pointer-events: auto; pointer-events: auto; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); opacity: 1; overflow: hidden; position: relative; }
 #main .thumb:after { background-image: -moz-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); background-image: -webkit-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); background-image: -ms-linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); background-image: linear-gradient(to top, rgba(10,17,25,0.35) 5%, rgba(10,17,25,0) 35%); -moz-pointer-events: none; -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; background-size: cover; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
@@ -301,7 +304,7 @@ body.ie #main:before { background: rgba(36, 38, 41, 0.55); }
 body.content-active #main { -moz-filter: blur(6px); -webkit-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px); }
 body.content-active #main:after { -moz-pointer-events: auto; -webkit-pointer-events: auto; -ms-pointer-events: auto; pointer-events: auto; opacity: 1; visibility: visible; }
 body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; opacity: 0; }
-#main .thumb { -moz-transition-delay: 2.525s; -webkit-transition-delay: 2.525s; -ms-transition-delay: 2.525s; transition-delay: 2.525s; height: calc(40vh - 2em); min-height: 20em; width: 25%; }
+#main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(40vh - 2em); min-height: 20em; width: 25%; }
 #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }
 #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }
 #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; }
@@ -314,7 +317,7 @@ body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: n
 #main .thumb:nth-child(10) { -moz-transition-delay: 1.1s; -webkit-transition-delay: 1.1s; -ms-transition-delay: 1.1s; transition-delay: 1.1s; }
 #main .thumb:nth-child(11) { -moz-transition-delay: 1.2s; -webkit-transition-delay: 1.2s; -ms-transition-delay: 1.2s; transition-delay: 1.2s; }
 #main .thumb:nth-child(12) { -moz-transition-delay: 1.3s; -webkit-transition-delay: 1.3s; -ms-transition-delay: 1.3s; transition-delay: 1.3s; }
-@media screen and (max-width: 1680px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(40vh - 2em); min-height: 20em; width: 33.3333333333%; }
+@media screen and (max-width: 1680px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(40vh - 2em); min-height: 20em; width: calc(33.3333333333% - 13.333px); }
   #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }
   #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }
   #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; }
@@ -324,14 +327,14 @@ body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: n
   #main .thumb:nth-child(7) { -moz-transition-delay: 0.8s; -webkit-transition-delay: 0.8s; -ms-transition-delay: 0.8s; transition-delay: 0.8s; }
   #main .thumb:nth-child(8) { -moz-transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s; }
   #main .thumb:nth-child(9) { -moz-transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s; } }
-@media screen and (max-width: 1280px) { #main .thumb { -moz-transition-delay: 1.625s; -webkit-transition-delay: 1.625s; -ms-transition-delay: 1.625s; transition-delay: 1.625s; height: calc(40vh - 2em); min-height: 20em; width: 50%; }
+@media screen and (max-width: 1280px) { #main .thumb { -moz-transition-delay: 1.625s; -webkit-transition-delay: 1.625s; -ms-transition-delay: 1.625s; transition-delay: 1.625s; height: calc(40vh - 2em); min-height: 20em; width: calc(50% - 15px); }
   #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }
   #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }
   #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; }
   #main .thumb:nth-child(4) { -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; }
   #main .thumb:nth-child(5) { -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s; }
   #main .thumb:nth-child(6) { -moz-transition-delay: 0.7s; -webkit-transition-delay: 0.7s; -ms-transition-delay: 0.7s; transition-delay: 0.7s; } }
-@media screen and (max-width: 980px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(28.5714285714vh - 1.3333333333em); min-height: 18em; width: 50%; }
+@media screen and (max-width: 980px) { #main .thumb { -moz-transition-delay: 1.4s; -webkit-transition-delay: 1.4s; -ms-transition-delay: 1.4s; transition-delay: 1.4s; height: calc(28.5714285714vh - 1.3333333333em); min-height: 18em; width: calc(50% - 15px); }
   #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }
   #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }
   #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; }
@@ -342,6 +345,9 @@ body.loading #main .thumb { -moz-pointer-events: none; -webkit-pointer-events: n
   #main .thumb:nth-child(8) { -moz-transition-delay: 0.9s; -webkit-transition-delay: 0.9s; -ms-transition-delay: 0.9s; transition-delay: 0.9s; }
   #main .thumb:nth-child(9) { -moz-transition-delay: 1s; -webkit-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s; } }
 @media screen and (max-width: 480px) { #main .thumb { -moz-transition-delay: 1.175s; -webkit-transition-delay: 1.175s; -ms-transition-delay: 1.175s; transition-delay: 1.175s; height: calc(40vh - 2em); min-height: 18em; width: 100%; }
+  #main .thumb {
+    margin: 0 0 10px 0;
+  }
   #main .thumb:nth-child(1) { -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; }
   #main .thumb:nth-child(2) { -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }
   #main .thumb:nth-child(3) { -moz-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } }