Style display of blog posts

src/pages/blog.njk

@@ -14,10 +14,10 @@ pagination:
 permalink: "/{{ page.fileSlug }}{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber + 1 }}{% endif %}/"
 ---
 
-<ul class="blog__postlist">
+<ul class="blog__posts">
     {% for post in postList %}
-        <li>
-            <h2 class="blog__title">
+        <li class="blog__post">
+            <h2 class="blog__post--title">
                 <a href="{{ post.url }}">
                     {% if post.data.title %}{{ post.data.articleTitle }}
                     {% else %}
@@ -32,3 +32,33 @@ permalink: "/{{ page.fileSlug }}{% if pagination.pageNumber > 0 %}/page/{{ pagin
 </ul>
 
 {% include "global/pagination-oldnew.njk" %}
+
+<style>
+    .blog__posts,
+    .blog__post {
+        display: grid;
+    }
+
+    .blog__posts {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        gap: 1.5em;
+    }
+
+    .blog__post {
+        gap: 0.6em;
+        padding-bottom: 1.5em;
+        border-bottom: 0.2em solid var(--clr-quote-border);
+    }
+
+    .blog__post--title {
+        font-size: clamp(1.55rem, 1rem + 3vw, 1.8rem);
+        line-height: 1.3;
+    }
+
+    .blog__post time {
+        color: var(--clr-sub-heading);
+        font-weight: 600;
+    }
+</style>