Implemented small breakpoint

app/components/Header.js

@@ -12,8 +12,6 @@ export default function Header() {
           h-[40px]
           px-[var(--spacing-measures-spacing-016)]
           py-[var(--spacing-measures-spacing-008)]
-          sm:px-[var(--spacing-measures-spacing-032)]
-          sm:py-[var(--spacing-measures-spacing-012)]
           lg:px-[var(--spacing-measures-spacing-120,120px)]
           lg:py-[var(--spacing-measures-spacing-016,16px)]"
       >
@@ -22,11 +20,8 @@ export default function Header() {
           <div className="block sm:hidden">
             <Logo size="header" showText={false} />
           </div>
-          <div className="hidden sm:block lg:hidden">
-            <Logo size="header" showText={false} />
-          </div>
-          <div className="hidden lg:block">
-            <Logo size="headerLg" showText={false} />
+          <div className="hidden sm:block">
+            <Logo size="header" showText={true} />
           </div>
         </div>
 

app/components/Logo.js

@@ -9,11 +9,11 @@ export default function Logo({ size = "default", showText = true }) {
       iconSize: "w-[27.05px] h-[27.05px]",
     },
     header: {
-      containerHeight: "h-[14.24px]",
+      containerHeight: "h-[20.85px]",
       gap: "gap-[2.11px]",
-      textSize: "text-[18px]",
-      lineHeight: "leading-[22px]",
-      iconSize: "w-[22px] h-[22px]",
+      textSize: "text-[11.57px]",
+      lineHeight: "leading-[14px]",
+      iconSize: "w-[14.24px] h-[14.24px]",
     },
     headerLg: {
       containerHeight: "h-[36px]",