From f9cb18bd740b29c1f97632abfb5041349be25c1c Mon Sep 17 00:00:00 2001
From: Joel Brock <joelbrock@gmail.com>
Date: Mon, 18 May 2026 17:26:46 -0700
Subject: [PATCH] Portfolio: 78% width centered, extra vertical breathing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Portfolio cards no longer span the full 12-column row on tablet+
sizes — they cap at 78% max-width and center themselves, so a
landscape image feels less like a wall and more like a plate inside
the layout. Stays full-bleed below 700px so it still feels right on
phones. Added margin-block to push neighbors away vertically.
---
 assets/css/styles.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 92e25b0..daf9286 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -279,8 +279,17 @@ main > .section:first-child { margin-top: var(--space-3xl); }
   .grid > .card--featured{ grid-column: span 8; }
 }
 
-/* portfolio item — always full row */
-.grid > .card--portfolio { grid-column: span 12; }
+/* portfolio item — full row on mobile, ~78% centered with breathing room above */
+.grid > .card--portfolio {
+  grid-column: span 12;
+  margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
+}
+@media (min-width: 700px) {
+  .grid > .card--portfolio {
+    max-width: 78%;
+    justify-self: center;
+  }
+}
 
 /* clients grid — auto-flowing square tiles */
 .grid--clients {