Fix cropped heads in Art in Motion, shrink social cards

- painting-process and portrait-3: object-position top to show heads
- Social cards grid: constrained to max-w-4xl (~25% smaller)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-10 22:01:39 +00:00
parent a44b7848dd
commit d497c5735e
1 changed files with 4 additions and 3 deletions

View File

@ -579,10 +579,10 @@ function AboutSection() {
</div>
<div className="grid grid-cols-3 gap-3 mt-8">
{[
{ src: '/images/about/painting-process.webp', alt: 'Ximena painting' },
{ src: '/images/about/painting-process.webp', alt: 'Ximena painting', position: 'top' },
{ src: '/images/art/mural-bio-centro.webp', alt: 'Mural Bio Centro Guembe' },
{ src: '/images/about/portrait-2.jpg', alt: 'Ximena painting mural' },
{ src: '/images/about/portrait-3.jpg', alt: 'Ximena in studio' },
{ src: '/images/about/portrait-3.jpg', alt: 'Ximena in studio', position: 'top' },
{ src: '/images/about/portrait-4.jpg', alt: 'Ximena at ceremony' },
{ src: '/images/about/pachamama.jpg', alt: 'Ximena — ritual with smoke' },
].map((photo, index) => (
@ -592,6 +592,7 @@ function AboutSection() {
alt={photo.alt}
fill
className="object-cover transition-transform duration-500 group-hover:scale-105"
style={photo.position ? { objectPosition: photo.position } : undefined}
/>
</div>
))}
@ -802,7 +803,7 @@ function SocialSection() {
</div>
{/* Instagram-style Grid */}
<div className="grid grid-cols-2 md:grid-cols-3 gap-5 mb-10">
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-10 max-w-4xl mx-auto">
{instagramPosts.map((post, index) => (
<a
key={index}