fixes

app/components/LinkWrapper.tsx

@@ -1,9 +1,7 @@
 export function LinkWrapper({ children }: React.PropsWithChildren) {
   return (
     <div className="flex flex-col items-center">
-      <div className="mt-5 hover:text-[#e6c2bf] font-bold text-2xl">
-        {children}
-      </div>
+      <div className="mt-5 hover:text-[#e6c2bf] font-bold">{children}</div>
     </div>
   );
 }

app/components/PostPreview.tsx

@@ -11,11 +11,11 @@ export function PostPreview({
 }: SerializeFrom<Post>) {
   const formattedDate = useFormattedDate(published);
   return (
-    <div className="sm:w-full sm:px-5 lg:w-5/6 xl:w-1/3">
+    <div className="w-full sm:w-4/5 md:w-3/4 lg:w-2/3 xl:w-1/3">
       <Link to={filename}>
         <div className="space-y-4 py-3 text-center font-bold border-gray-600 border-2 rounded-lg">
-          <div className="text-[#ffff00] text-2xl">{title}</div>
-          <div className="text-xl px-3">{description}</div>
+          <div className="text-[#ffff00]">{title}</div>
+          <div>{description}</div>
           <div>
             <time>{formattedDate}</time>
           </div>

app/components/Title.tsx

@@ -1,7 +1,7 @@
 export function Title({ children }: React.PropsWithChildren) {
   return (
     <div className="mt-5 flex flex-col items-center">
-      <div className="text-[#ffff00] font-bold text-2xl">
+      <div className="text-[#ffff00] font-bold">
         <span>{children}</span>
       </div>
     </div>

app/routes/blog._index.tsx

@@ -18,7 +18,7 @@ export default function Blog() {
   return (
     <>
       <Title>Here I blog about whatever get my attention</Title>
-      <div className="flex flex-col items-center space-y-5">
+      <div className="mt-5 flex flex-col items-center space-y-5">
         {posts.map((post) => (
           <PostPreview {...post} key={post.title} />
         ))}

app/routes/blog.tsx

@@ -24,7 +24,7 @@ export default function BlogLayout() {
   const { handle } = useMatch();
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 px-2">
       <LinkWrapper>
         <Link to={handle.to}>{handle.text}</Link>
       </LinkWrapper>