add xs breakpoint

src/components/MasonryGallery.js

@@ -19,7 +19,7 @@ const MasonryGallery = ({
     [aspectTargetsByBreakpoint]
     );
 
-  const { breakpoint } = useBreakpoint(breakpoints, "md");
+  const { breakpoint } = useBreakpoint(breakpoints, "sm");
 
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {
@@ -87,6 +87,8 @@ const MasonryGallery = ({
 
   let cursor = 0;
   return (
+    <>
+    {/* {breakpoint} */}
     <div
       className="w-full flex items-center flex-wrap"
       style={{
@@ -158,8 +160,8 @@ const MasonryGallery = ({
         );
       })}
     </div>
+    </>
   );
-  // return null;
 };
 
 export default MasonryGallery;

src/pages/photogallery.js

@@ -148,6 +148,7 @@ const GalleryPage = ({ data }) => {
       </div>
       <MasonryGallery
         aspectsByBreakpoint={{
+          xs: 2,
           sm: 3,
           md: 4,
           lg: 4,

tailwind.config.js

@@ -6,6 +6,7 @@ module.exports = {
   // darkMode: 'media', // or 'media' or 'class'
   theme: {
     screens: {
+      xs: "10px",
       sm: "640px",
       md: "768px",
       lg: "1024px",