Responsive strategy for photo gallery header

src/components/KeywordsPicker.js

@@ -1,10 +1,10 @@
-import classNames from "classnames";
 import * as React from "react";
+import classNames from "classnames";
 
 const KeywordsPicker = ({ keywords, value, onChange }) => {
   return (
     <div className="mx-2">
-      <span className="text-xs text-[#A2A2A2]">Filter by...</span>
+      <span className="text-xs text-[#A2A2A2]">Filter...</span>
       <ul className="flex gap-1 flex-wrap mt-1 mb-2">
         {keywords.map((keyword) => {
           const selected = value === keyword;

src/components/MasonryGallery.js

@@ -17,9 +17,9 @@ const MasonryGallery = ({
   const breakpoints = React.useMemo(
     () => R.pick(R.keys(aspectTargetsByBreakpoint), themeBreakpoints),
     [aspectTargetsByBreakpoint]
-  );
+    );
 
-  const { breakpoint } = useBreakpoint(breakpoints, "sm");
+  const { breakpoint } = useBreakpoint(breakpoints, "md");
 
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {