Update image display to focus on people and faces

Improve image centering using AI-detected focal points for better object positioning and refactor layout from CSS columns to grid for consistent card arrangement.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: edf8349d-a329-4319-9e7e-65b120df76b0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -373,15 +373,17 @@ export default function Home() {
           {row2Left.map((a) => (
             <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
           ))}
-          <PhotoGalleryWidget />
           <RecipeWidget />
+          <HoroscopeWidget />
         </div>
 
+        <NativeAdCard />
+
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          <HoroscopeWidget />
           {row3Middle.map((a) => (
             <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
           ))}
+          <PhotoGalleryWidget />
           <NewsWidget />
         </div>