Adjust image cropping to better display faces in photos

Apply `objectPosition: "center 25%"` to all relevant image elements across the client application to ensure faces are consistently visible and not cropped out by the `object-cover` CSS property. This change impacts components in `photo-gallery`, `article`, `category`, and `home` pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 6fbb209e-0312-4027-963a-b6aa098cc025
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true

client/src/components/horoscope-widget.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
+import { useLocation } from "wouter";
 import { Star, ChevronLeft, ChevronRight, X } from "lucide-react";
 
 const SIGNS = [

client/src/components/photo-gallery.tsx

@@ -114,7 +114,8 @@ function SingleImageCarousel({
         <img
           src={images[index].large || images[index].thumb}
           alt={images[index].fileName}
-          className="w-full h-full object-cover object-top transition-opacity duration-500"
+          className="w-full h-full object-cover transition-opacity duration-500"
+          style={{ objectPosition: "center 25%" }}
           loading="lazy"
           data-testid="img-gallery-current"
         />