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]",

app/globals.css

@@ -1,4 +1,4 @@
-@import "./tailwind.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "./tailwind.css";

app/tailwind.css

@@ -6,6 +6,13 @@
 @import "tailwindcss";
 
 @theme inline {
+  /* Custom breakpoints */
+  --breakpoint-xsm: 429px;
+  --breakpoint-sm: 430px;
+  --breakpoint-md: 640px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 
   /* Reset default Tailwind configuration */
   --color-*: initial;