Better related posts section

assets/css/bobastyle.css

@@ -244,19 +244,31 @@
   padding: 8px 15px;
 }
 
+
+/* Related posts */
+.related hr {
+  margin: 25px 0px;
+}
+
+@media (min-width: 720px) {
+  .related {
+    /* this makes it full width -- 720px max-width on body */
+    margin-left: calc(-100vw / 2 + 760px / 2);
+    margin-right: calc(-100vw / 2 + 760px / 2);
+  }
+}
+
 .related-posts {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  gap: 20px;
-  justify-content: space-evenly;
+  grid-template-columns: repeat(auto-fit, minmax(0, 360px));
-  gap: 10px;
-  align-items: stretch; /* this is default anyways */
 }
 
 .related-posts .post {
-  min-width: 10%;
-  flex: 1 1 49%;
 }
 
+
+/* Back to top */
 #back-to-top {
   position: fixed;
   float: right;

layouts/_default/single.html

@@ -50,13 +50,17 @@
         {{ .Content }}
     </div>
 
-    {{ $related := .Site.RegularPages.Related . | first 5 }}
+    {{ $related := .Site.RegularPages.Related . | first 10 }}
     {{ with $related }}
-        <h2>{{ i18n "related_posts" }}</h2>
+        <div class="related">
-        <div class="related-posts">
+            <hr>
-            {{ range . }}
+            <h2>{{ i18n "related_posts" }}</h2>
-                {{ .Render "summary/post" }}
+            <div class="related-posts">
-            {{ end }}
+                {{ range . }}
+                    {{ .Render "summary/post" }}
+                {{ end }}
+            </div>
+            <hr>
         </div>
     {{ end }}