Improved thumbnail alignment and responsiveness

AUTHORS

@@ -14,6 +14,7 @@ alphabetical order):
 - Kai Fricke
 - Keith Johnson
 - Lukas Vacek
+- @lukecyca (Luke Cyca)
 - Matthias Vogelgesang
 - Miroslav Pavleski
 - Nicolas Arnaud-Cormos

sigal/themes/photoswipe/static/styles.css

@@ -1,6 +1,6 @@
 html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, fieldset, legend, label, table, header, footer, nav, section, figure {
   margin: 0;
-  padding: 0; 
+  padding: 0;
 }
 
 body {
@@ -18,6 +18,7 @@ body {
 
 figure {
   display: block;
+  max-width: 100%;
 }
 
 a {
@@ -91,7 +92,7 @@ figcaption {
 
 .menu ul {
   max-width: 1024px;
-  margin: 0 auto; 
+  margin: 0 auto;
 }
 
 .menu li {
@@ -113,9 +114,9 @@ figcaption {
   float:left;
 }
 .thumbnail img {
-  max-width: 80%;
+  max-width: 85%;
   height: auto;
-  margin: 0 5px 5px 0;
+  margin: 0 2px 5px 2px;
   border: 10px solid #fff;
   border-radius: 2px 2px 2px 2px;
   box-shadow: 0 0 3px #B1B1B1;
@@ -167,8 +168,6 @@ figcaption {
   padding-top:1em;
 }
 .gallery a {
-  float: left;
-  margin: 0 12px 12px 0;
   line-height: 0;
 }
 
@@ -178,6 +177,7 @@ figcaption {
 }
 
 .gallery__img--secondary {
+  width: 25%;
   float:left;
 }
 
@@ -200,27 +200,24 @@ footer p {
 }
 
 @media screen and (max-width: 700px) {
-  .gallery__img--main a{
-    max-width: 700px;
-  }
-}
-
-@media screen and (max-width: 650px) {
-   h1 {
+  h1 {
     font-size: 40px;
   }
-}
-
-
-@media screen and (max-width: 450px) {
-  .gallery__img--main a{
-    max-width: 400px;
+  .gallery__img--secondary {
+    width: 33%;
   }
 }
 
 
-@media screen and (max-width: 350px) {
-  .gallery__img--main a{
-    max-width: 300px;
+@media screen and (max-width: 500px) {
+  .gallery__img--secondary {
+    width: 50%;
   }
-}
+}
+
+
+@media screen and (max-width: 300px) {
+  .gallery__img--secondary {
+    width: 100%;
+  }
+}