fix: CSS issues

src/pages/posts/[post_id].astro

@@ -18,14 +18,16 @@ const { Content } = await render(post);
 
 <Layout>
   <main>
-    <div>
-      <h1>{post.data.title}</h1>
-      <h2>{post.data.tags}</h2>
-      <img
-        src={post.data.illustration?.src}
-        alt={post.data?.illustration?.src}
-      />
-    </div>
-    <Content />
+    <article class="post-container">
+      <header class="post-header">
+        <h1>{post.data.title}</h1>
+        <h2>{post.data.tags}</h2>
+        <img src={post.data.illustration?.src} alt={post.data.title} />
+      </header>
+
+      <div class="post-content">
+        <Content />
+      </div>
+    </article>
   </main>
 </Layout>

src/styles/post.css

@@ -1,72 +1,88 @@
 @import "../styles/global.css";
 
 main {
-  padding: 2rem;
+  padding: 2rem 1rem;
+  display: flex;
+  justify-content: center;
+}
 
-  & > div {
-    text-align: center;
+.post-container {
+  width: 100%;
+  max-width: 800px;
+  background-color: var(--primary-light-background-color);
+  padding: 2.5rem;
+  border-radius: 12px;
+  box-sizing: border-box;
+}
 
-    & > h1 {
-      font-size: 56px;
-      font-weight: 400;
-    }
-    & > h2 {
-      font-weight: 400;
-      font-style: italic;
-    }
-
-    & > img {
-      object-fit: cover;
-      border-radius: 8px;
-      width: 100%;
-      height: 24rem;
-      margin: 4rem 0;
-    }
-  }
+.post-header {
+  text-align: center;
+  margin-bottom: 3rem;
 
   & > h1 {
-    font-size: 56px;
-    font-weight: 400;
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    line-height: 1.15;
+    font-weight: 500;
+    margin: 0 0 0.5rem;
   }
-  & > p {
-    font-size: 19px;
-    word-break: break-word;
+
+  & > h2 {
+    font-size: 1.1rem;
+    font-weight: 400;
+    font-style: italic;
+    margin: 0 0 2rem;
+    color: #555;
+  }
+
+  & > img {
+    display: block;
+    width: 100%;
+    height: 24rem;
+    object-fit: cover;
+    border-radius: 8px;
+    margin: 0 auto;
+  }
+}
+
+.post-content {
+  font-size: 1.15rem;
+  line-height: 1.7;
+  color: #222;
+
+  & h1,
+  & h2,
+  & h3 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    line-height: 1.25;
+  }
+
+  & p {
+    margin-bottom: 1.5rem;
     text-align: justify;
     text-justify: inter-word;
+    word-break: break-word;
+  }
 
-    & > img {
-      display: block;
-      margin: 1rem auto;
-      height: auto;
-      width: 100%;
-      margin: 0;
-    }
+  & img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1.5rem auto;
+    border-radius: 6px;
   }
 }
 
-@media screen and (max-width: 1000px) {
-  main {
-    padding: 1rem;
-    > p {
-      font-size: 16px;
-    }
-    > h1 {
-      font-size: 48px;
-      font-weight: 400;
-    }
+@media screen and (max-width: 768px) {
+  .post-container {
+    padding: 1.25rem;
   }
-}
 
-@media screen and (max-width: 1200px) {
-  main {
-    & > div {
-      & > img {
-        object-fit: cover;
-        border-radius: 8px;
-        height: 16rem;
-        width: 90%;
-        margin: 0.5rem;
-      }
-    }
+  .post-header > img {
+    height: 16rem;
+  }
+
+  .post-content {
+    font-size: 1rem;
   }
 }