fix(team): significantly enlarge profile photos on mobile viewports for grid and carousel

components/blocks/TeamGrid.tsx

@@ -149,7 +149,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                 className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
               >
                 {/* Card Banner with Signature E-TIB LogoArcs Design Element */}
-                <div className="h-36 bg-neutral-50 relative border-b border-neutral-100 overflow-hidden select-none">
+                <div className="h-40 sm:h-44 md:h-36 bg-neutral-50 relative border-b border-neutral-100 overflow-hidden select-none">
                   <div className="absolute inset-0 bg-gradient-to-br from-neutral-100/90 via-neutral-50 to-orange-50/20" />
                   
                   {/* Signature E-TIB Logo Arcs Design Element */}
@@ -172,7 +172,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                 </div>
 
                 <div className="px-6 sm:px-8 pb-8 relative flex-grow flex flex-col items-center md:items-start text-center md:text-left">
-                  {/* Overlapping Profile Picture with Shared Layout Animation (Centered & Larger on Mobile) */}
+                  {/* Overlapping Profile Picture with Shared Layout Animation (Extra Large Centered on Mobile) */}
                   <m.div 
                     layoutId={`team-avatar-${member.id}`}
                     onClick={() => {
@@ -181,7 +181,7 @@ export function TeamGrid({ members }: TeamGridProps) {
                     }}
                     onMouseEnter={() => handlePreload(imageUrl)}
                     onTouchStart={() => handlePreload(imageUrl)}
-                    className="w-36 h-48 sm:w-40 sm:h-52 md:w-36 md:h-44 mx-auto md:mx-0 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"
+                    className="w-44 h-56 sm:w-48 sm:h-60 md:w-36 md:h-44 mx-auto md:mx-0 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-24 md:-mt-24 mb-6 group-hover:-translate-y-2 transition-transform duration-500 cursor-pointer group/avatar"
                   >
                     {imageUrl ? (
                       <>
@@ -370,10 +370,10 @@ export function TeamGrid({ members }: TeamGridProps) {
                     {/* 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 - Tall Portrait Aspect Framing for Mobile */}
+                    {/* Portrait Container - Immersive Extra Large Portrait Aspect Framing for Mobile */}
                     <m.div 
                       layoutId={`team-avatar-${selectedMember.id}`}
-                      className="relative w-full h-[52vh] min-h-[380px] max-h-[520px] md:h-[460px] bg-neutral-900 overflow-hidden shrink-0"
+                      className="relative w-full h-[60vh] min-h-[440px] max-h-[620px] md:h-[460px] bg-neutral-900 overflow-hidden shrink-0"
                     >
                       {selectedMember.image ? (
                         <Image

package.json

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