diff --git a/layouts/partials/blog/li.html b/layouts/partials/blog/li.html
index d60eb7d..75c1815 100644
--- a/layouts/partials/blog/li.html
+++ b/layouts/partials/blog/li.html
@@ -1,18 +1,41 @@
+<style>
+.post-item-wrapper {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    gap: 1.5rem;
+}
+
+.post-thumbnail {
+    flex-shrink: 0;
+}
+
+.post-thumbnail img {
+    max-width: 300px;
+    height: auto;
+    border-radius: 4px;
+}
+
+.post-content {
+    flex-grow: 1;
+}
+
+@media screen and (max-width: 768px) {
+    .post-item-wrapper {
+        flex-direction: column;
+    }
+
+    .post-thumbnail img {
+        max-width: 100%;
+        width: 100%;
+    }
+}
+</style>
+
 {{ range .Pages.ByPublishDate.Reverse }}
 {{ $post := . }}
-<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
-    {{ with .Params.image }}
-        {{ with $post.Resources.GetMatch . }}
-            {{ with .Resize "400x" }}
-                <div style="flex-shrink: 0;">
-                    <a href="{{ $post.Permalink }}">
-                        <img src="{{ .Permalink }}" alt="{{ $post.Title }}" style="max-width: 300px; height: auto; border-radius: 4px;">
-                    </a>
-                </div>
-            {{ end }}
-        {{ end }}
-    {{ end }}
-    <div style="flex-grow: 1;">
+<div class="post-item-wrapper">
+    <div class="post-content">
         <h3 class="title is-4" style="margin-bottom: 0.5rem;">
             <a href="{{ $post.Permalink }}">{{ $post.Title | markdownify }}</a>
         </h3>
@@ -21,9 +44,23 @@
             {{ $post.Date.Format (.Site.Params.dateFormat | default ":date_medium") }}
         </p>
         {{ end }}
-        {{ if $post.Summary }}
-        <p>{{ $post.Summary | truncate 150 }}</p>
-        {{ end }}
     </div>
+    {{ with .Params.image }}
+        {{ with $post.Resources.GetMatch . }}
+            {{ with .Resize "400x" }}
+                <div class="post-thumbnail">
+                    <a href="{{ $post.Permalink }}">
+                        <img src="{{ .Permalink }}" alt="{{ $post.Title }}">
+                    </a>
+                </div>
+            {{ end }}
+        {{ end }}
+    {{ end }}
 </div>
+<div style="margin-bottom: 2rem;">
+    {{ if $post.Summary }}
+    <p>{{ $post.Summary | truncate 150 }}</p>
+    {{ end }}
+</div>
+<hr>
 {{ end }}
diff --git a/public/blog/index.html b/public/blog/index.html
index 56a0b95..2facecd 100644
--- a/public/blog/index.html
+++ b/public/blog/index.html
@@ -140,21 +140,44 @@ Posts - Dendroalsia
 <div class="container">
     
     
-        
+        <style>
+.post-item-wrapper {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    gap: 1.5rem;
+}
 
-<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
-    
-        
-            
-                <div style="flex-shrink: 0;">
-                    <a href="https://www.dendroalsia.net/blog/riverlevelcharts/">
-                        <img src="https://www.dendroalsia.net/blog/riverlevelcharts/example_last_6_months_hu_3ee8d3a026ad5207.png" alt="River level charts" style="max-width: 300px; height: auto; border-radius: 4px;">
-                    </a>
-                </div>
-            
-        
-    
-    <div style="flex-grow: 1;">
+.post-thumbnail {
+    flex-shrink: 0;
+}
+
+.post-thumbnail img {
+    max-width: 300px;
+    height: auto;
+    border-radius: 4px;
+}
+
+.post-content {
+    flex-grow: 1;
+}
+
+@media screen and (max-width: 768px) {
+    .post-item-wrapper {
+        flex-direction: column;
+    }
+
+    .post-thumbnail img {
+        max-width: 100%;
+        width: 100%;
+    }
+}
+</style>
+
+
+
+<div class="post-item-wrapper">
+    <div class="post-content">
         <h3 class="title is-4" style="margin-bottom: 0.5rem;">
             <a href="https://www.dendroalsia.net/blog/riverlevelcharts/">River level charts</a>
         </h3>
@@ -163,29 +186,32 @@ Posts - Dendroalsia
             Oct 14, 2024
         </p>
         
-        
-        <p><p>I&rsquo;m interested in rivers (both ecologically and recreationally) and I want to know</p>
-<ul>
-<li>what water level different rivers are currently at</li>
-<li>how does …</li></ul></p>
-        
     </div>
-</div>
-
-
-<div class="post-item" style="display: flex; align-items: center; margin-bottom: 2rem; gap: 1.5rem;">
     
         
             
-                <div style="flex-shrink: 0;">
-                    <a href="https://www.dendroalsia.net/blog/prettyrivers/">
-                        <img src="https://www.dendroalsia.net/blog/prettyrivers/wisconsin_rivers_hu_d6e96c96b70bfc8f.png" alt="Pretty rivers" style="max-width: 300px; height: auto; border-radius: 4px;">
+                <div class="post-thumbnail">
+                    <a href="https://www.dendroalsia.net/blog/riverlevelcharts/">
+                        <img src="https://www.dendroalsia.net/blog/riverlevelcharts/example_last_6_months_hu_3ee8d3a026ad5207.png" alt="River level charts">
                     </a>
                 </div>
             
         
     
-    <div style="flex-grow: 1;">
+</div>
+<div style="margin-bottom: 2rem;">
+    
+    <p><p>I&rsquo;m interested in rivers (both ecologically and recreationally) and I want to know</p>
+<ul>
+<li>what water level different rivers are currently at</li>
+<li>how does …</li></ul></p>
+    
+</div>
+<hr>
+
+
+<div class="post-item-wrapper">
+    <div class="post-content">
         <h3 class="title is-4" style="margin-bottom: 0.5rem;">
             <a href="https://www.dendroalsia.net/blog/prettyrivers/">Pretty rivers</a>
         </h3>
@@ -194,11 +220,25 @@ Posts - Dendroalsia
             Jan 1, 2024
         </p>
         
-        
-        <p><p>I like maps that isolate different natural features. And I think that rivers make pretty patterns. So I made a series of scripts that generates a …</p></p>
-        
     </div>
+    
+        
+            
+                <div class="post-thumbnail">
+                    <a href="https://www.dendroalsia.net/blog/prettyrivers/">
+                        <img src="https://www.dendroalsia.net/blog/prettyrivers/wisconsin_rivers_hu_d6e96c96b70bfc8f.png" alt="Pretty rivers">
+                    </a>
+                </div>
+            
+        
+    
 </div>
+<div style="margin-bottom: 2rem;">
+    
+    <p><p>I like maps that isolate different natural features. And I think that rivers make pretty patterns. So I made a series of scripts that generates a …</p></p>
+    
+</div>
+<hr>