feat: update responsive text sizes and adjust header class for improved layout

Author: RPDeshaies

src/components/client/Card/Card.tsx

@@ -112,7 +112,10 @@ export function Card(props: {
                   )}
                   <Text
                     as="div"
-                    size="6"
+                    size={{
+                      initial: "4",
+                      lg: "6",
+                    }}
                     weight="bold"
                     truncate
                     color="gray"
@@ -125,7 +128,10 @@ export function Card(props: {
                 {props.subtitle && (
                   <Text
                     as="div"
-                    size="5"
+                    size={{
+                      initial: "2",
+                      lg: "5",
+                    }}
                     color="gray"
                     truncate
                     className="dark text-(--accent-a11)"

src/components/server/Header/Header.tsx

@@ -66,7 +66,7 @@ export function Header(props: { theme?: ThemeType }) {
         justify={"between"}
         align={"center"}
         columns="3"
-        className="initial:my-6 initial:mb-[3rem] my-9 items-center rounded-(--radius-2) border-t border-r border-b border-l border-(--accent-4) px-6 py-5 print:hidden"
+        className="my-9 mb-[3rem] items-center rounded-(--radius-2) border-t border-r border-b border-l border-(--accent-4) px-6 py-5 print:hidden"
         style={{
           ...getSurfaceStyle(),
         }}

src/routes/HomeRoute/HomeRoute.tsx

@@ -87,7 +87,7 @@ export function HomeRoute(props: {
             width={"40%"}
             justify="center"
             align={"center"}
-            className="initial:hidden relative md:flex"
+            className="relative hidden md:flex"
           >
             <Box
               className="animate-blur absolute z-[-1] hidden h-[calc(100%+4rem)] w-[calc(100%+4rem)] rounded-lg opacity-60 dark:block"