diff --git a/content/assets/theme.css b/content/assets/theme.css
index 869b774..213a57c 100644
--- a/content/assets/theme.css
+++ b/content/assets/theme.css
@@ -283,8 +283,18 @@ ol.pages li a {
   padding: 0 1em;
 }
 
+section.visual {
+  display: grid;
+  grid-gap: 1em;
+  align-items: center;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
+
+section.visual figure { margin: 0 }
 figure img {
   max-width: 100%;
+  height: auto;
+  /* aspect-ratio: attr(width) / attr(height); */
   vertical-align: top;
 }
 
diff --git a/src/Visual.hs b/src/Visual.hs
index 5ede041..6863898 100644
--- a/src/Visual.hs
+++ b/src/Visual.hs
@@ -5,40 +5,50 @@ import Common
 import Templates (outerWith, loading_)
 import Lucid
 
+
+thumbWidth :: Int
+thumbWidth = 710
+
+
 build :: Task IO ()
 build = do
     pictures <- match "visual/*" \src -> do
-      copyFile src
-      src' <- toAbsolute src
-      size <- (resized . read)
-              <$> readCommand "identify" ["-ping", "-format", "(%w, %h)", src']
-      processMagick src
-        <&> timestamped
-        <&> fmap (size,) 
+        copyFile src
+        callCommandWith
+            (\a b -> "convert " <> a <> " " <> b)
+            (-<.> "webp")
+            src
+        src' <- toAbsolute src
+        size <- (resized . read)
+                <$> readCommand "identify" ["-ping", "-format", "(%w, %h)", src']
+        callCommandWith
+            (\a b -> "convert -resize 710x " <> a <> " " <> b)
+            (-<.> "thumb.webp")
+            src
+            <&> timestamped
+            <&> fmap (size,) 
 
     watch pictures $ match_ "./visual.rst" \src -> do
         intro <- compilePandoc src
         write "visual.html" $ renderVisual intro (recentFirst pictures)
-
-resized :: (Int, Int) -> (Int, Int)
-resized (width, height) = (710, round $ fi height * 710.0 / fi width)
     where
-        fi :: Int -> Float
-        fi = fromIntegral
+        resized :: (Int, Int) -> (Int, Int)
+        resized (width, height) =
+            (thumbWidth, round $ fi height * fi thumbWidth / fi width)
+            where
+                fi :: Int -> Float
+                fi = fromIntegral
+
 
 renderVisual :: Text -> [Timestamped ((Int, Int), FilePath)] -> Html ()
 renderVisual txt imgs =
     outerWith def {title = "visual"} do
         toHtmlRaw txt
         hr_ []
-        section_ $ forM_ imgs \ (Timestamped _ ((width, height), p)) ->
-            figure_ $ img_
-                [ src_ (fromString p)
-                , width_ (fromString $ show width)
-                , height_ (fromString $ show height)
-                , loading_ "lazy" ]
-
-processMagick :: FilePath -> Task IO FilePath
-processMagick = callCommandWith
-    (\a b -> "convert -resize 710x " <> a <> " " <> b)
-    (-<.> "thumb.webp")
+        section_ [class_ "visual"] $
+            forM_ imgs \ (Timestamped _ ((width, height), p)) ->
+                figure_ $ a_ [href_ (fromString (replaceExtensions p "webp"))] $ img_
+                    [ src_ (fromString p)
+                    , width_ (fromString $ show width)
+                    , height_ (fromString $ show height)
+                    , loading_ "lazy" ]