fix: mobile

Author: rayriffy

src/pages/session/[id].astro

@@ -33,24 +33,24 @@ const { session, speakers  } = Astro.props
             <LogoHorizontal class="h-12 text-white" />
         </a>
     </nav>
-    <section class="px-20 pb-12 h-[calc(100dvh-224px)]">
-        <div class="pt-24 grid grid-cols-1 md:grid-cols-2 gap-8">
+    <section class="px-8 pt-12 md:px-20 md:pt-24 pb-12 min-h-[calc(100dvh-224px)]">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
             {speakers.map(speaker => (
                 <div class="flex space-x-4 items-center">
-                    <div class="w-32 h-32 shrink-0">
+                    <div class="w-20 md:w-32 aspect-square shrink-0">
                         <Picture
                             src={speaker.profilePicture}
-                            class="w-32 h-32 rounded-full"
+                            class="w-full aspect-square rounded-full"
                             formats={['avif', 'webp']}
                             alt={speaker.fullName}
                             width="200"
                             height="200"
                         />
                     </div>
                     <div>
-                        <h1 class="text-4xl font-extrabold">{speaker.fullName}</h1>
-                        <h2 class="text-lg">{speaker.tagLine}</h2>
-                        <div class="flex space-x-2 pt-2">
+                        <h1 class="text-3xl md:text-4xl font-extrabold">{speaker.fullName}</h1>
+                        <h2 class="md:text-lg">{speaker.tagLine}</h2>
+                        <div class="flex gap-2 pt-2 flex-wrap">
                             {speaker.links.map(link => (
                                 <a href={link.url} class="underline">{link.title}</a>
                             ))}