Attempt to improve responsive loading and sizes on mobile

src/components/PictureSwipe.vue

@@ -78,6 +78,14 @@ export default {
       type: Object
     }
   },
+  computed: {
+    thumbMaxW () {
+      return this.$mq.mobile ? 242 : 300
+    },
+    thumbMaxH () {
+      return this.$mq.mobile ? 104 : 128
+    }
+  },
   methods: {
     open (index, disableAnimation = false) {
       let that = this
@@ -117,13 +125,13 @@ export default {
     thumbSize (item) {
       let thumbW = item.w
       let thumbH = item.h
-      if (thumbW > 256) {
+      if (thumbW > this.thumbMaxW) {
-        thumbH = (thumbH * 256) / thumbW
+        thumbH = (thumbH * this.thumbMaxW) / thumbW
-        thumbW = 256
+        thumbW = this.thumbMaxW
       }
-      if (thumbH > 128) {
+      if (thumbH > this.thumbMaxH) {
-        thumbW = (thumbW * 128) / thumbH
+        thumbW = (thumbW * this.thumbMaxH) / thumbH
-        thumbH = 128
+        thumbH = this.thumbMaxH
       }
       return { w: Math.round(thumbW), h: Math.round(thumbH) }
     }

src/components/SummitPhotosGroup.vue

@@ -170,7 +170,7 @@ export default {
 }
 .photos >>> figure img {
   max-height: 128px;
-  max-width: 256px;
+  max-width: 300px;
   background-color: #e7e7e7;
 }
 >>> .photo-title {
@@ -206,7 +206,7 @@ export default {
   }
   .photos >>> figure img {
     max-height: 104px;
-    width: auto;
+    max-width: 242px;
   }
   .photo-group {
     padding: 0.25rem 0 0 0.5rem;