design: adjust breakpoints to concise layout

src/layouts/BlogPost.astro

@@ -76,7 +76,7 @@ const toc = buildToc(headings);
         <section
                 class="self-center flex justify-center items-stretch w-full p-8 xl:p-0"
         >
-            <article class="self-center w-full max-w-screen-md pb-16">
+            <article class="self-center w-full lg:max-xl:max-w-screen-sm max-w-screen-md pb-16">
                 <section class="mb-4 image min-h-[20rem] w-full bg-cover bg-no-repeat bg-center" style={{ ...(thumbnail && { backgroundImage: `url("${thumbnail.src}")` }) }}>
 
                 </section>
@@ -121,8 +121,8 @@ const toc = buildToc(headings);
                         <Series posts={allPosts} series={series} selectedSlug={slug}/>}
                 <Comments client:only="solid-js"/>
             </article>
-            <section class="hidden self-stretch lg:block pt-[20rem] max-w-xs">
-                <div class="py-8 pl-8 sticky top-0">
+            <aside class="hidden self-stretch lg:block pt-[20rem] max-w-xs">
+                <div class="py-8 pl-4 sticky top-0">
                     <TableOfContents tocHeadings={toc} client:only="solid-js"/>
                 </div>
             </section>