refactor(app): improve layout consistency and responsiveness across pages

The changes focus on standardizing layouts, spacing, and container usage
throughout the site while enhancing responsive behavior. Key improvements
include:

- Unified container usage for consistent page widths
- Standardized section padding and gaps
- Removed redundant padding/margin classes
- Better responsive grid layouts
- Consistent text alignment and spacing
- Cleaner flexbox structures

src/pages/[...locale]/mods/index.astro

@@ -18,16 +18,12 @@ const allMods = (await getAllMods()) || []
 ---
 
 <Layout title={layout.mods.title}>
-  <main class="mx-auto mt-32 max-w-[120rem] 2xl:mt-0">
-    <header class="mb-10 mt-32 flex w-full flex-col justify-center border-dark">
-      <div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2">
-        <div>
+  <main class="mt-32 container 2xl:mt-32 flex flex-col gap-10">
+    <header class="flex w-full flex-col border-dark gap-8">
           <Description class="text-6xl font-bold">{mods.title}</Description>
-          <Description>
+          <Description class="max-w-3xl">
             {mods.description}
           </Description>
-        </div>
-      </div>
     </header>
 
     <!-- Importing ModList component -->