introduce spacing to accomondate mobile view

app/experience/page.tsx

@@ -22,7 +22,7 @@ export default function ExperiencePage() {
       <section id="projects-list">
         <div className="mx-auto w-full max-w-6xl space-y-8">
           <div className="space-y-2">
-            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none mt-12">
               Experience
             </h1>
             <p className="text-muted-foreground">

app/publications/page.tsx

@@ -39,7 +39,7 @@ export default function PublicationsPage() {
       <section id="publications">
         <div className="mx-auto w-full max-w-4xl space-y-6">
           <div className="space-y-2">
-            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none mt-12">
               Publications
             </h1>
             <p className="text-muted-foreground">
@@ -67,7 +67,7 @@ export default function PublicationsPage() {
 
           </div>
           <hr />
-          <h2 className="font-bold text-2xl">References Statistics</h2>
+          <h2 className="font-bold text-2xl">References</h2>
           <div className="space-y-8">
             {years.map((year) => (
               <div key={year} className="flex flex-col md:flex-row md:space-x-8">

components/page-article.tsx

@@ -35,11 +35,11 @@ export function Article({ post, publications, navigation, basePath }: ArticlePro
     <CitationProvider publications={publications}>
       <main className="flex flex-col min-h-[100dvh] space-y-10">
         <section id="article">
-          <div className="mx-auto w-full max-w-4xl space-y-8">
-            <div className="flex flex-col gap-y-2 sm:flex-row sm:justify-between sm:items-center">
-              <Breadcrumbs 
-                basePath={basePath} 
-                baseLabel={basePath.charAt(0).toUpperCase() + basePath.slice(1)} 
+          <div className="mx-auto w-full max-w-4xl space-y-8 mt-12">
+            <div className="flex justify-between">
+              <Breadcrumbs
+                basePath={basePath}
+                baseLabel={basePath.charAt(0).toUpperCase() + basePath.slice(1)}
               />
               {post.frontmatter.date && (
                 <time className="text-sm text-muted-foreground" dateTime={post.frontmatter.date}>
@@ -65,15 +65,15 @@ export function Article({ post, publications, navigation, basePath }: ArticlePro
               {post.frontmatter.icon && (
                 <div className="float-left mr-4 mb-2">
                   <Image
-                      src={post.frontmatter.icon}
-                      alt={`${post.frontmatter.title} icon`}
-                      width={64}
-                      height={64}
-                      className="full"
+                    src={post.frontmatter.icon}
+                    alt={`${post.frontmatter.title} icon`}
+                    width={64}
+                    height={64}
+                    className="full"
                   />
                 </div>
               )}
-              
+
               <CustomMDX code={post.code} />
             </article>
 
@@ -89,7 +89,7 @@ export function Article({ post, publications, navigation, basePath }: ArticlePro
             )}
 
             <ReferencesContainer />
-            
+
             {navigation && (
               <ProjectNavigation prev={navigation.prev} next={navigation.next} basePath={basePath} />
             )}