From 32178bf2e5462c9c95d9c1b80f080d12e9a323e3 Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Mon, 17 Aug 2026 20:58:13 +0200
Subject: [PATCH] Verticaal centreren foto op desktop, iets meer mobiele
 witruimte

Door items-start op de grid werd de fotocel niet uitgerekt over de
beide rijen, waardoor de flex-centrering in de fotowrapper geen
effect had en de foto naast de kop bovenaan bleef hangen i.p.v.
gecentreerd naast kop + tekst samen. sm:items-stretch lost dit op.
Foto is daarnaast iets vergroot (h-48/w-48 -> h-56/w-56 op sm), en de
mobiele gap tussen kop/foto/tekst is licht verruimd (gap-6 -> gap-8,
mb-2 -> mb-3).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/features/landing/components/AboutSection.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/landing/components/AboutSection.tsx b/src/features/landing/components/AboutSection.tsx
index 349451d..eb3df57 100644
--- a/src/features/landing/components/AboutSection.tsx
+++ b/src/features/landing/components/AboutSection.tsx
@@ -4,8 +4,8 @@ export function AboutSection() {
   return (
     <section className="py-[88px]">
       <div className="mx-auto max-w-[1080px] px-6">
-        <div className="grid grid-cols-1 items-start gap-6 sm:grid-cols-[1.2fr_0.8fr] sm:grid-rows-[auto_1fr] sm:gap-12">
-          <div className="order-1 mb-2 sm:col-start-1 sm:row-start-1 sm:mb-0">
+        <div className="grid grid-cols-1 items-start gap-8 sm:grid-cols-[1.2fr_0.8fr] sm:grid-rows-[auto_1fr] sm:items-stretch sm:gap-12">
+          <div className="order-1 mb-3 sm:col-start-1 sm:row-start-1 sm:mb-0">
             <span
               id="over"
               className="font-mono block scroll-mt-16 text-sm uppercase tracking-wider text-accent"
@@ -17,7 +17,7 @@ export function AboutSection() {
             </h2>
           </div>
           <div className="order-2 flex items-center justify-center sm:order-3 sm:col-start-2 sm:row-start-1 sm:row-span-2">
-            <div className="font-mono flex h-40 w-40 flex-col items-center justify-center gap-1 rounded-full border-2 border-accent-line bg-surface text-center text-[0.7rem] uppercase tracking-wider text-muted shadow-lg sm:h-48 sm:w-48">
+            <div className="font-mono flex h-40 w-40 flex-col items-center justify-center gap-1 rounded-full border-2 border-accent-line bg-surface text-center text-[0.7rem] uppercase tracking-wider text-muted shadow-lg sm:h-56 sm:w-56">
               <span>foto</span>
               <span>Bryan Slop</span>
             </div>