update photo gallery layout strategy and add a few ultrawide pics

src/pages/photogallery.js

@@ -5,9 +5,6 @@ import { Helmet } from "react-helmet";
 
 import MasonryGallery from "../components/MasonryGallery";
 
-// TODO: caption and title more images
-// TODO: more images
-
 const GalleryPage = ({ data }) => {
   const images = React.useMemo(
     () => data.allFile.edges.map((edge) => edge.node, [data]),
@@ -41,18 +38,18 @@ const GalleryPage = ({ data }) => {
           gallery
         </Link>
       </nav>
-      <div className="bg-black min-h-screen mx-auto 2xl:container">
+      <div className="bg-black min-h-screen mx-auto">
         <h1 className="text-5xl mt-0 ml-5 font-serif font-black z-10 relative">
           Photo Gallery
         </h1>
         <div className="mx-auto">
           <MasonryGallery
             images={images}
-            itemsPerRow={{
-              sm: 2,
-              md: 2,
-              lg: 3,
-              xl: 3,
+            aspectsByBreakpoint={{
+              sm: 3.6,
+              md: 4,
+              lg: 5,
+              xl: 6.1,
             }}
           />
         </div>