fix: CSS issues

src/pages/posts/[post_id].astro

@@ -18,14 +18,16 @@ const { Content } = await render(post);
 
 <Layout>
   <main>
-    <div>
+    <article class="post-container">
+      <header class="post-header">
         <h1>{post.data.title}</h1>
         <h2>{post.data.tags}</h2>
-      <img
+        <img src={post.data.illustration?.src} alt={post.data.title} />
-        src={post.data.illustration?.src}
+      </header>
-        alt={post.data?.illustration?.src}
+
-      />
+      <div class="post-content">
-    </div>
         <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 {
+.post-container {
+  width: 100%;
+  max-width: 800px;
+  background-color: var(--primary-light-background-color);
+  padding: 2.5rem;
+  border-radius: 12px;
+  box-sizing: border-box;
+}
+
+.post-header {
   text-align: center;
+  margin-bottom: 3rem;
 
   & > h1 {
-      font-size: 56px;
+    font-size: clamp(2rem, 5vw, 3.5rem);
-      font-weight: 400;
+    line-height: 1.15;
+    font-weight: 500;
+    margin: 0 0 0.5rem;
   }
+
   & > h2 {
+    font-size: 1.1rem;
     font-weight: 400;
     font-style: italic;
+    margin: 0 0 2rem;
+    color: #555;
   }
 
-    & > img {
-      object-fit: cover;
-      border-radius: 8px;
-      width: 100%;
-      height: 24rem;
-      margin: 4rem 0;
-    }
-  }
-
-  & > h1 {
-    font-size: 56px;
-    font-weight: 400;
-  }
-  & > p {
-    font-size: 19px;
-    word-break: break-word;
-    text-align: justify;
-    text-justify: inter-word;
-
   & > img {
     display: block;
-      margin: 1rem auto;
-      height: auto;
     width: 100%;
-      margin: 0;
+    height: 24rem;
-    }
-  }
-}
-
-@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: 1200px) {
-  main {
-    & > div {
-      & > img {
     object-fit: cover;
     border-radius: 8px;
-        height: 16rem;
+    margin: 0 auto;
-        width: 90%;
+  }
-        margin: 0.5rem;
+}
-      }
+
-    }
+.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;
+    max-width: 100%;
+    height: auto;
+    margin: 1.5rem auto;
+    border-radius: 6px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .post-container {
+    padding: 1.25rem;
+  }
+
+  .post-header > img {
+    height: 16rem;
+  }
+
+  .post-content {
+    font-size: 1rem;
   }
 }