improve screenshots layout

Author: Thomas Stromberg

src/assets/css/style.css

@@ -500,14 +500,14 @@ body {
 /* Screenshot Grid */
 .screenshot-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: 1fr;
     gap: 24px;
     margin: 40px 0;
 }
 
-/* Override for 2x2 grid on larger screens */
+/* 2x2 grid on larger screens */
 @media (min-width: 769px) {
-    .screenshot-grid[style*="repeat(2"] {
+    .screenshot-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }
@@ -517,6 +517,17 @@ body {
     border-radius: 8px;
     padding: 16px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.screenshot-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.screenshot-item a {
+    display: block;
+    cursor: pointer;
 }
 
 .screenshot-item img {
@@ -525,6 +536,11 @@ body {
     border-radius: 4px;
     display: block;
     border: 1px solid rgba(0, 0, 0, 0.1);
+    transition: opacity 0.2s;
+}
+
+.screenshot-item a:hover img {
+    opacity: 0.9;
 }
 
 .screenshot-caption {

src/products/ready-to-review.njk

@@ -44,33 +44,41 @@ title: Ready to Review - Eliminate PR coordination overhead
     </div>
 
     <h2>SCREENSHOTS</h2>
-    <div class="screenshot-grid" style="grid-template-columns: repeat(2, 1fr);">
+    <div class="screenshot-grid">
       <div class="screenshot-item">
-        <picture>
-          <source srcset="/assets/screenshots/slack-screenshot.webp" type="image/webp">
-          <img src="/assets/screenshots/slack-screenshot.png" alt="Slack channel notifications with real-time status updates" loading="lazy" />
-        </picture>
+        <a href="/assets/screenshots/slack-screenshot.png" target="_blank" rel="noopener noreferrer">
+          <picture>
+            <source srcset="/assets/screenshots/slack-screenshot.webp" type="image/webp">
+            <img src="/assets/screenshots/slack-screenshot.png" alt="Slack channel notifications with real-time status updates" loading="lazy" />
+          </picture>
+        </a>
         <p class="screenshot-caption">Slack channel notifications with real-time status updates</p>
       </div>
       <div class="screenshot-item">
-        <picture>
-          <source srcset="/assets/screenshots/slack-screenshot-home.webp" type="image/webp">
-          <img src="/assets/screenshots/slack-screenshot-home.png" alt="Slack app home showing user dashboard" loading="lazy" />
-        </picture>
+        <a href="/assets/screenshots/slack-screenshot-home.png" target="_blank" rel="noopener noreferrer">
+          <picture>
+            <source srcset="/assets/screenshots/slack-screenshot-home.webp" type="image/webp">
+            <img src="/assets/screenshots/slack-screenshot-home.png" alt="Slack app home showing user dashboard" loading="lazy" />
+          </picture>
+        </a>
         <p class="screenshot-caption">App home showing your personal dashboard</p>
       </div>
       <div class="screenshot-item">
-        <picture>
-          <source srcset="/assets/screenshots/goose-screenshot.webp" type="image/webp">
-          <img src="/assets/screenshots/goose-screenshot.png" alt="Native desktop notifications from Goose" loading="lazy" />
-        </picture>
+        <a href="/assets/screenshots/goose-screenshot.png" target="_blank" rel="noopener noreferrer">
+          <picture>
+            <source srcset="/assets/screenshots/goose-screenshot.webp" type="image/webp">
+            <img src="/assets/screenshots/goose-screenshot.png" alt="Native desktop notifications from Goose" loading="lazy" />
+          </picture>
+        </a>
         <p class="screenshot-caption">Native notifications (macOS, Linux, Windows)</p>
       </div>
       <div class="screenshot-item">
-        <picture>
-          <source srcset="/assets/screenshots/r2r-800.webp" type="image/webp">
-          <img src="/assets/screenshots/r2r-800.png" alt="Ready to Review dashboard showing PR status and assignments" loading="lazy" />
-        </picture>
+        <a href="/assets/screenshots/r2r-800.png" target="_blank" rel="noopener noreferrer">
+          <picture>
+            <source srcset="/assets/screenshots/r2r-800.webp" type="image/webp">
+            <img src="/assets/screenshots/r2r-800.png" alt="Ready to Review dashboard showing PR status and assignments" loading="lazy" />
+          </picture>
+        </a>
         <p class="screenshot-caption">Web dashboard - track all PRs at a glance</p>
       </div>
     </div>