src/pages/posts/[post_id].astro

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

src/styles/post.css

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