fix(team): apply portrait aspect ratio framing to both grid thumbnails and carousel modal

components/blocks/TeamGrid.tsx

@@ -181,7 +181,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                     }}
                     onMouseEnter={() => handlePreload(imageUrl)}
                     onTouchStart={() => handlePreload(imageUrl)}
-                    className="w-32 h-32 md:w-36 md:h-36 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-16 md:-mt-20 mb-6 group-hover:-translate-y-2 transition-transform duration-500 cursor-pointer group/avatar"
+                    className="w-32 h-40 md:w-36 md:h-44 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-20 md:-mt-24 mb-6 group-hover:-translate-y-2 transition-transform duration-500 cursor-pointer group/avatar"
                   >
                     {imageUrl ? (
                       <>
@@ -190,7 +190,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                           alt={member.name}
                           fill
                           sizes="(max-width: 768px) 128px, 144px"
-                          className="object-cover transition-transform duration-500 group-hover/avatar:scale-105"
+                          className="object-cover object-[center_15%] transition-transform duration-500 group-hover/avatar:scale-105"
                         />
                         {/* Zoom Icon Overlay on Hover */}
                         <div className="absolute inset-0 bg-black/40 opacity-0 group-hover/avatar:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white cursor-pointer">
@@ -365,15 +365,15 @@ export function TeamGrid({ members }: TeamGridProps) {
                       scale: { duration: 0.25 },
                     }}
                     onClick={(e) => e.stopPropagation()}
-                    className="bg-white rounded-3xl overflow-hidden max-w-lg w-full shadow-2xl border border-white/20 relative flex flex-col z-20 my-auto touch-none cursor-grab active:cursor-grabbing"
+                    className="bg-white rounded-[2rem] sm:rounded-3xl overflow-hidden max-w-[380px] sm:max-w-md md:max-w-lg w-full shadow-2xl border border-white/20 relative flex flex-col z-20 my-auto touch-none cursor-grab active:cursor-grabbing shrink-0"
                   >
                     {/* Mobile Drag Indicator Bar */}
                     <div className="absolute top-3 left-1/2 -translate-x-1/2 z-30 w-12 h-1.5 rounded-full bg-white/50 backdrop-blur-sm pointer-events-none" />
 
-                    {/* Portrait Container - Height tuned for Mobile without vertical squishing */}
+                    {/* Portrait Container - Tall Portrait Aspect Framing for Mobile */}
                     <m.div 
                       layoutId={`team-avatar-${selectedMember.id}`}
-                      className="relative w-full h-[320px] sm:h-[400px] md:h-[450px] bg-neutral-900 overflow-hidden shrink-0"
+                      className="relative w-full h-[52vh] min-h-[380px] max-h-[520px] md:h-[460px] bg-neutral-900 overflow-hidden shrink-0"
                     >
                       {selectedMember.image ? (
                         <Image
@@ -381,7 +381,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                           alt={selectedMember.name}
                           fill
                           sizes="(max-width: 768px) 100vw, 600px"
-                          className="object-cover object-top pointer-events-none select-none"
+                          className="object-cover object-[center_15%] pointer-events-none select-none"
                           priority
                         />
                       ) : (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "e-tib-nextjs",
-  "version": "2.4.49",
+  "version": "2.4.51",
   "type": "module",
   "private": true,
   "packageManager": "pnpm@10.18.3",