Improve mobile responsive layout and site content

src/pages/blog/[slug].astro

@@ -33,21 +33,34 @@ const formattedDate = new Intl.DateTimeFormat('th-TH', {
       </div>
     </header>
 
+    <div class="blog-feature-image">
+      {['ai-for-sme-start-with-pain', 'marketing-automation-reduce-work', 'sme-website-next-action'].includes(post.id) ? (
+        <img src={`/images/blog-${post.id === 'ai-for-sme-start-with-pain' ? 'ai' : post.id === 'marketing-automation-reduce-work' ? 'automation' : 'website'}.jpg`} alt={post.data.title} />
+      ) : (
+        <img src="/images/blog-marketing.jpg" alt={post.data.title} />
+      )}
+    </div>
+
     <div class="blog-article-shell">
       <div class="blog-prose">
         <Content />
       </div>
     </div>
   </article>
-
-  <section class="final-cta">
-    <div class="glass-panel liquid-glass liquidGlass-wrapper">
-      <div class="liquidGlass-effect" aria-hidden="true"></div>
-      <div class="liquidGlass-tint" aria-hidden="true"></div>
-      <div class="liquidGlass-shine" aria-hidden="true"></div>
-      <p class="eyebrow">ขั้นตอนถัดไป</p>
-      <h2>อ่านแล้วเจอโจทย์คล้ายกัน ส่งปัญหามาให้เราช่วยดูก่อนได้</h2>
-      <button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
-    </div>
-  </section>
 </PageShell>
+
+<style>
+  .blog-article-hero { padding-bottom: clamp(36px, 5vw, 64px); }
+
+  .blog-feature-image {
+    max-width: var(--container);
+    margin: 2rem auto 1rem;
+    padding: 0 1rem;
+  }
+
+  .blog-feature-image img {
+    width: 100%;
+    border-radius: 20px;
+    display: block;
+  }
+</style>