Enhance global styles and components: add new breakpoint in globals.css, update SearchInput for improved styling and responsiveness, and modify Navbar for sticky positioning and better layout.

src/app/globals.css

@@ -64,8 +64,12 @@
   --color-hippie-blue-800: #2c4a60;
   --color-hippie-blue-900: #283f52;
   --color-hippie-blue-950: #1b2936;
+
+  --breakpoint-xs: 420px;
 }
 
+@custom-variant hover-any (&:hover);
+
 @layer base {
   body {
     @apply bg-pink-lady-50 text-text;
@@ -102,5 +106,5 @@
 }
 
 @utility grid-auto-cols-* {
-  grid-template-columns: repeat(auto-fill, --value(integer));
+  grid-template-columns: repeat(--value(integer), 1fr);
 }