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);
 }

src/components/atoms/SearchInput/index.tsx

@@ -33,8 +33,8 @@ export const SearchInput: FC<Props> = ({
     <div className={`relative text-gray-600 inline-block ${className}`}>
       <input
         type="search"
-        name="serch"
-        className="bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none w-48 focus:w-[400px] transition-all"
+        name="search"
+        className="bg-white h-10 px-5 pr-10 rounded-full text-md md:text-sm focus:outline-none w-52 focus:w-[400px] transition-all max-w-[90vw]"
         value={value}
         placeholder={placeholder}
         onChange={(e) => setValue(e.target.value)}

src/components/organisms/Navbar/index.tsx

@@ -14,7 +14,7 @@ const links = [
 
 export const Navbar = () => {
   return (
-    <header className="bg-white shadow-sm">
+    <header className="bg-white shadow-sm max-sm:sticky top-0 w-full z-30">
       <div className="container">
         <div className="flex items-center gap-8 py-4">
           <Link className="block text-teal-600" href="/">