From d357eba65f145a1a8282877a7cb5359c69c9aecc Mon Sep 17 00:00:00 2001
From: Joel Brock <joelbrock@gmail.com>
Date: Mon, 18 May 2026 17:28:35 -0700
Subject: [PATCH] =?UTF-8?q?Videos:=20same=20portfolio=20treatment=20?=
 =?UTF-8?q?=E2=80=94=2078%=20centered,=20stacked,=20breathing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

YouTube cards now follow the portfolio pattern: full-bleed on
mobile, 78% max-width centered on 700px+, with margin-block to keep
neighbors at distance. Dropped the old span 6 (2-up pair) rules at
the 600/960px breakpoints — videos read better as deliberate single
plates than as a grid wall now that they take up real space.
---
 assets/css/styles.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index daf9286..eb82a63 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -270,22 +270,22 @@ main > .section:first-child { margin-top: var(--space-3xl); }
 @media (min-width: 600px) {
   .grid > .card--link    { grid-column: span 6; }
   .grid > .card--project { grid-column: span 6; }
-  .grid > .card--youtube { grid-column: span 6; }
 }
 @media (min-width: 960px) {
   .grid > .card--link    { grid-column: span 4; }
   .grid > .card--project { grid-column: span 6; }
-  .grid > .card--youtube { grid-column: span 6; }
   .grid > .card--featured{ grid-column: span 8; }
 }
 
-/* portfolio item — full row on mobile, ~78% centered with breathing room above */
-.grid > .card--portfolio {
+/* portfolio + video items — full row on mobile, ~78% centered with extra breathing */
+.grid > .card--portfolio,
+.grid > .card--youtube {
   grid-column: span 12;
   margin-block: clamp(0.5rem, 1.5vw, 1.25rem);
 }
 @media (min-width: 700px) {
-  .grid > .card--portfolio {
+  .grid > .card--portfolio,
+  .grid > .card--youtube {
     max-width: 78%;
     justify-self: center;
   }