diff --git a/exampleSite/content/samples/diagrams-flowcharts.md b/exampleSite/content/samples/diagrams-flowcharts.md
index 1dafbd22..9e186fb5 100755
--- a/exampleSite/content/samples/diagrams-flowcharts.md
+++ b/exampleSite/content/samples/diagrams-flowcharts.md
@@ -14,6 +14,7 @@ The examples below are a small selection taken from the [official Mermaid docs](
 
 ## Flowchart
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -30,9 +31,11 @@ F
 G
 end
 {{< /mermaid >}}
+</div>
 
 ## Sequence diagram
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -50,9 +53,11 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
+</div>
 
 ## Class diagram
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -76,9 +81,11 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
+</div>
 
 ## Entity relationship diagram
 
+<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 erDiagram
 CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -90,3 +97,5 @@ ORDER ||--|{ ORDER-ITEM : includes
 PRODUCT-CATEGORY ||--|{ PRODUCT : contains
 PRODUCT ||--o{ ORDER-ITEM : "ordered in"
 {{< /mermaid >}}
+</div>
+
diff --git a/exampleSite/layouts/partials/recent-articles-demo.html b/exampleSite/layouts/partials/recent-articles-demo.html
index 25ff4965..cf73aeed 100644
--- a/exampleSite/layouts/partials/recent-articles-demo.html
+++ b/exampleSite/layouts/partials/recent-articles-demo.html
@@ -8,7 +8,8 @@
 
 <div class="flex mb-6 px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
     <span class="flex items-center justify-between grow dark:text-neutral-300">
-        <span class="prose dark:prose-invert">This is a demo of theme's list configurations: <code id="config">card view with constrained width</code></span>
+        <span class="prose dark:prose-invert">This is a demo of theme's list configurations: <code
+                id="config">card view with constrained width</code></span>
         <button id="switch-config-button"
             class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700">
             Switch config &orarr;
@@ -17,28 +18,22 @@
 </div>
 
 <div id="CardViewScreenWidth" class="">
-    <section class="relative w-screen max-w-[1600px]" style="left: calc(max(-50vw,-800px) + 50%);">
-        <div class="flex flex-wrap pl-8 pr-8">
-            {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-            .Site.Params.mainSections)).Pages }}
-            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5">
-                {{ partial "article-link-card.html" . }}
-            </div>
-            {{ end }}
-        </div>
+    <section
+        class="relative w-screen max-w-[1600px] grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+        style="left: calc(max(-50vw,-800px) + 50%);">
+        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+        .Site.Params.mainSections)).Pages }}
+        {{ partial "article-link-card.html" . }}
+        {{ end }}
     </section>
 </div>
 
 <div id="CardViewProse" class="hidden h-full">
-    <section class="w-full">
-        <div class="flex flex-wrap">
-            {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
-            .Site.Params.mainSections)).Pages }}
-            <div class="flex flex-wrap w-full p-4 sm:w-1/2 md:w-1/3">
-                {{ partial "article-link-card.html" . }}
-            </div>
-            {{ end }}
-        </div>
+    <section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">
+        {{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
+        .Site.Params.mainSections)).Pages }}
+        {{ partial "article-link-card.html" . }}
+        {{ end }}
     </section>
 </div>
 
diff --git a/package.json b/package.json
index b4f5198d..faa58bdc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hugo-blowfish-theme",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "description": "Blowfish theme for Hugo",
   "scripts": {
     "fullinstall": "npm run preinstall && npm install && npm run postinstall",