diff --git a/assets/css/style.css b/assets/css/style.css
index 9881f84..8cb7cc1 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -75,3 +75,31 @@ footer {
 .footer-back {
   float: right;
 }
+
+/* tablet */
+@media (min-width: 401px) {
+  .article { margin: 0 45px; }
+  .article p {
+    margin: 25px 0px;
+  }
+}
+
+/* widescreen */
+@media (min-width: 1000px) {
+  .article {
+    display: grid;
+    grid-template-columns: 1fr 700px 1fr;
+  }
+  .article p {
+    grid-column-start: 2;
+    margin: 15px;
+  }
+}
+
+/* phone */
+@media (max-width: 400px) {
+  .article { margin: 0 20px; }
+  .article p {
+    margin: 25px 0px;
+  }
+}
diff --git a/posts/meeting-the-bsd-family.html b/posts/meeting-the-bsd-family.html
index d8ace29..be0bfcf 100644
--- a/posts/meeting-the-bsd-family.html
+++ b/posts/meeting-the-bsd-family.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <meta name="author" content="Juno Takano" />
   <meta name="dcterms.date" content="2024-05-20" />
-  <title>Meeting the BSD Family • jutty.dev</title>
+  <title>Meeting the BSD family • jutty.dev</title>
   <style>
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
@@ -23,8 +23,9 @@
 </head>
 <body>
 <header id="title-block-header">
-<h1 class="title">Meeting the BSD Family</h1>
+<h1 class="title">Meeting the BSD family</h1>
 </header>
+<main class="article">
 <p>During this year I have been delving deeper and deeper in the BSD
 realm. Switching my home server to FreeBSD, trying NetBSD and OpenBSD on
 my backup machine, getting a cheap SSD to see how they’d all run on my
@@ -103,6 +104,8 @@ better has been a joy. It opened up whole new avenues and perspectives
 to understanding operating systems as a whole, and how beyond
 Linux-based OSs there are numerous other free and open source operating
 systems that strengthen the diversity in this field.</p>
+</main class="article">
+</body>
 <footer>
 <hr/>
 <div class="footer-text">
@@ -115,5 +118,4 @@ systems that strengthen the diversity in this field.</p>
 </span>
 </div>
 </footer>
-</body>
 </html>
diff --git a/posts/scripts-em-ocaml.html b/posts/scripts-em-ocaml.html
index af9a1fe..2ca4f87 100644
--- a/posts/scripts-em-ocaml.html
+++ b/posts/scripts-em-ocaml.html
@@ -86,6 +86,7 @@
 <header id="title-block-header">
 <h1 class="title">Scripts em OCaml</h1>
 </header>
+<main class="article">
 <p>Este blog gera suas postagens com o Pandoc, mas quem faz o trabalho
 lógico de identificar os arquivos e montar os comandos é um pequeno
 script em OCaml.</p>
@@ -127,6 +128,8 @@ a directory/Non-recursively - Rosetta Code</a></li>
 <li><a href="https://jez.io/pandoc-markdown-css-theme/">Pandoc Markdown
 CSS Theme</a></li>
 </ul>
+</main class="article">
+</body>
 <footer>
 <hr/>
 <div class="footer-text">
@@ -139,5 +142,4 @@ CSS Theme</a></li>
 </span>
 </div>
 </footer>
-</body>
 </html>
diff --git a/posts/template.html b/posts/template.html
index 6be5f83..3b30b9f 100644
--- a/posts/template.html
+++ b/posts/template.html
@@ -59,10 +59,13 @@ $endif$
 $table-of-contents$
 </nav>
 $endif$
+<main class="article">
 $body$
+</main class="article">
 $for(include-after)$
 $include-after$
 $endfor$
+</body>
 <footer>
 <hr/>
 <div class="footer-text">
@@ -79,5 +82,4 @@ $if(date)$
 $endif$
 </div>
 </footer>
-</body>
 </html>
