photo gallery css update

css/default.scss

@@ -118,6 +118,18 @@ article .header {
     display: inline;
     margin: 0 0.6rem;
   }
+  .gallery {
+  }
+
+.photo {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.photo > img {
+    width: 100%;
+    height: auto;
+}
 }
 
 @media (min-width: 640px) {
@@ -149,6 +161,21 @@ article .header {
     float: left;
     font-size: 1.8rem;
   }
+  .gallery {
+    display:flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.photo {
+    flex-basis: 50%;
+}
+.photo > img {
+    width: 100%;
+    height: auto;
+}
 }
 
 img {
@@ -170,19 +197,3 @@ code {
     padding: .1rem .3rem .2rem;
 }
 
-.gallery {
-    display:flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-}
-
-.photo {
-    flex-basis: 33%;
-}
-.photo > img {
-    width: 100%;
-    height: auto;
-}