fix react hydration issue

gatsby/src/components/MasonryGallery.js

@@ -27,7 +27,7 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
 
   // console.log('bp', breakpoint);
   const rowAspectRatioSumsForCurrentBP = rowAspectRatioSumsByBreakpoint[breakpoint];
-  console.log('rowAspectRatioSumsForCurrentBP :', rowAspectRatioSumsForCurrentBP);
+  // console.log('rowAspectRatioSumsForCurrentBP :', rowAspectRatioSumsForCurrentBP);
   
   return (
     <div
@@ -41,24 +41,33 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
       {images.map((image, i) => {
         const rowIndex = Math.floor(i / itemsPerRowByBreakpoint[breakpoint]);
         const rowAspectRatioSum = rowAspectRatioSumsForCurrentBP[rowIndex];
+        const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
         // console.log('ars', rowAspectRatioSum);
         if (i === 0) {
-          console.log(rowIndex, rowAspectRatioSum);
+          // console.log(rowIndex, rowAspectRatioSum);
-          console.log(getName(image), `${(getAspectRatio(image) / rowAspectRatioSum) * 100}%`);
+          console.log(getName(image), `${width}%`);
         }
         return (
-          // <Link className='inline-block' key={image.base} state={{modal: true}} to={`/photogallery/${image.base}`}>
+          <div 
-          <GatsbyImage
+            key={`${image.base}`}
-            key={`${image.base}-img`}
             className='inline-block'
             style={{
-              width: `${(getAspectRatio(image) / rowAspectRatioSum) * 100}%`,
+              width: `${width}%`,
             }}
-            // objectFit='contain'
+          >
+            {/* // <Link className='inline-block' key={image.base} state={{modal: true}} to={`/photogallery/${image.base}`}> */}
+            <GatsbyImage
+              // key={`${image.base}-img`}
+              // className='p-2'
+              style={{
+                width: '100%',
+              }}
+              objectFit='contain'
               image={getImage(image)}
               alt={getName(image)}
             />
-          // </Link>
+            {/* // </Link> */}
+          </div>
         );
       })}
     </div>);

gatsby/src/pages/photogallery.js

@@ -36,10 +36,11 @@ const GalleryPage = ({ data }) => {
         <MasonryGallery
           images={images}
           itemsPerRow={{
-            sm: 2,
+            sm: 1,
-            md: 3,
+            md: 2,
-            lg: 4,
+            lg: 2,
-            xl: 5,
+            xl: 3,
+            '2xl': 4,
           }}
         />
       </div>
@@ -63,7 +64,7 @@ query GalleryPageQuery {
           },
           gatsbyImageData(
             layout: CONSTRAINED,
-            height: 400
+            height: 550
           )
           fields {
             imageMeta {