add shoot the light, add pics, add 3xl breakpoint

src/components/MasonryGallery.tsx

@@ -33,12 +33,14 @@ const MasonryGallery = ({
   debugRating,
   linkState,
 }: MasonryGalleryProps) => {
+  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 38 ~ themeBreakpoints", themeBreakpoints)
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
     [aspectTargetsByBreakpoint]
   );
 
   const { breakpoint } = useBreakpoint(breakpoints, "sm");
+  console.log("🚀 ~ file: MasonryGallery.tsx ~ line 43 ~ breakpoint", breakpoint)
 
   const aspectRatios = React.useMemo(
     () => R.map(getAspectRatio, images).filter(Boolean),

src/pages/photogallery.tsx

@@ -183,6 +183,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
               "fireworks",
               "panoramic",
               "Portland Japanese Garden",
+              "shoot the light",
               // "sunset",
             ]}
             onChange={setKeyword}
@@ -195,7 +196,7 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
               onSelectionChange={setSortKey}
               selectedKey={sortKey}
             >
-              <Item key="rating">Default</Item>
+              <Item key="rating">Curated</Item>
               <Item key="date">Date</Item>
               <Item key="hue">Hue</Item>
             </Picker>
@@ -209,7 +210,8 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
           md: 4,
           lg: 4,
           xl: 5,
-          // '2xl': 6.1,
+          '2xl': 6.1,
+          '3xl': 7.5,
         }}
         debugHue={sortKey === "hue_debug"}
         debugRating={sortKey === "rating" && showDebug}

tailwind.config.js

@@ -12,6 +12,7 @@ module.exports = {
       lg: "1024px",
       xl: "1280px",
       "2xl": "1536px",
+      "3xl": "2500px",
       portrait: { raw: "(orientation: portrait)" },
       landscape: { raw: "(orientation: landscape)" },
     },