move image-row height and col to media queries to adjust with viewport

_sass/_gallery.scss

@@ -11,7 +11,7 @@ figcaption {
     background: $theme-color;
 }
 .img_row {
-    height: $img-height;
+    /*height: $img-height;*/
     width: 100%;
     overflow: hidden;
     box-sizing:border-box;
@@ -21,7 +21,7 @@ figcaption {
     height: 100%;
     object-fit: cover;
     box-sizing:border-box;
-    padding: $img-spacing;
+    /*padding: $img-spacing;*/
 }
 .one {
     width:33.33%;

_sass/_media-queries.scss

@@ -47,18 +47,36 @@
   .social-icons-right {
     text-align: right;
   }
+  .img_row {
+     height: $img-height/3;
+  }
+  .col {
+      padding: $img-spacing/3;
+  }
 }
 
 @media screen and (min-width: $viewport-medium) {
   html {
     font-size: 18px;
   }
+  .img_row {
+     height: $img-height/1.5;
+  }
+  .col {
+      padding: $img-spacing/1.5;
+  }
 }
 
 @media screen and (min-width: $viewport-large) {
   html {
     font-size: 20px;
   }
+  .img_row {
+     height: $img-height;
+  }
+  .col {
+      padding: $img-spacing;
+  }
 }
 
 @media screen and (min-width: $viewport-large + 14) {