sort gallery by Vibrant hue

src/components/GalleryImage/GalleryImage.js

@@ -145,7 +145,7 @@ const GalleryImage = ({ data, pageContext }) => {
             <GatsbyImage
               alt={name}
               className={classnames(
-                "border-4 border-muted-light",
+                "border-4 border-vibrant",
                 zoom ? "cursor-zoom-out" : "cursor-zoom-in"
               )}
               image={getImage(image)}

src/components/MasonryGallery.js

@@ -17,7 +17,6 @@ const MasonryGallery = ({
   );
 
   const { breakpoint } = useBreakpoint(breakpoints, "sm");
-  console.log("🚀 ~ file: MasonryGallery.js ~ line 20 ~ breakpoint", breakpoint)
 
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {
@@ -34,7 +33,7 @@ const MasonryGallery = ({
     // hacky but it works for now
     setTimeout(() => {
       scrollIntoView();
-    }, 100)
+    }, 100);
   }, [scrollIntoView]);
 
   const aspectRatios = React.useMemo(