fix: used bigger member card variation for sm breakpoint; made minor …

src/components/sections/MembersMeetTheTeamSection.tsx

@@ -132,8 +132,8 @@ export const MembersMeetTheTeamSection: React.FC<MembersMeetTheTeamSectionProps>
 
       )}
 
-      <div className="flex flex-col items-center mt-12 sm:mt-16 gap-y-3 sm:gap-y-6 md:gap-y-9 lg:gap-y-10 w-full md:w-auto">
-        <ul className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-8 md:gap-10 w-full max-w-6xl">
+      <div className="flex flex-col items-center mt-12 sm:mt-16 gap-y-3 sm:gap-y-9 lg:gap-y-10 w-full sm:w-auto">
+        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-8 sm:gap-10 w-full max-w-6xl">
           {members.map((member, idx) => (
             <li key={idx} className="flex justify-center">
               <MemberCard member={member} />

src/components/ui/DepartmentCard.tsx

@@ -52,17 +52,17 @@ export interface DepartmentCardProps {
 }
 
 export const DepartmentCard: React.FC<DepartmentCardProps> = ({ title, desc, img }) => (
-  <div className="relative w-full md:w-3/4 md:max-w-3xl h-56 md:h-72 lg:h-80 rounded-3xl lg:rounded-4xl overflow-hidden mb-10 mt-10">
+  <div className="relative w-4/5 md:w-3/4 md:max-w-3xl h-56 md:h-72 lg:h-80 rounded-3xl lg:rounded-4xl overflow-hidden mb-10 mt-10">
     <Image
       src={withBasePath(`/images/${img}`)}
       alt={title}
       fill
       className="object-cover"
       priority
     />
-    <div className="absolute inset-0 bg-blue-950/50 flex flex-col justify-center items-center z-10">
-      <h1 className="text-2xl md:text-4xl font-bold text-yellow2 mb-2">{title}</h1>
-      <p className="text-lg md:text-2xl text-white text-center max-w-xl">{desc}</p>
+    <div className="absolute inset-0 bg-blue-950/50 flex flex-col justify-center items-center z-10 p-3 md:p-6">
+      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-yellow2 mb-2">{title}</h1>
+      <p className="text-sm md:text-lg text-white text-center max-w-xl">{desc}</p>
     </div>
   </div>
 );

src/components/ui/MemberCard.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import type { RawMember } from "@/lib/features/members/types/members";
 
 const positionVariants = cva(
-  "md:py-1 w-full min-w-[58px] rounded-full text-[10px] md:text-xs font-medium text-center",
+  "sm:py-1 w-full min-w-[58px] rounded-full text-[10px] sm:text-xs font-medium text-center",
   {
     variants: {
       positionColor: {
@@ -96,8 +96,8 @@ export function MemberCard({ member }: MemberCardProps) {
       case "Project Manager":
         return (
           <span>
-            <span className="inline md:hidden">PM</span>
-            <span className="hidden md:inline">Proj. Man.</span>
+            <span className="inline sm:hidden">PM</span>
+            <span className="hidden sm:inline">Proj. Man.</span>
           </span>
         );
       default:
@@ -108,7 +108,7 @@ export function MemberCard({ member }: MemberCardProps) {
   const renderPositions = () => {
     if (positions.length === 3) {
       return (
-        <div className="h-9 md:h-14 w-full">
+        <div className="h-9 sm:h-14 w-full">
           <div className="w-full mb-1.5">
             <div
               className={`
@@ -144,7 +144,7 @@ export function MemberCard({ member }: MemberCardProps) {
       return rows.map((row, rowIndex) => (
         <div
           key={rowIndex}
-          className={`w-full h-9 md:h-14 flex items-end gap-x-2 ${
+          className={`w-full h-9 sm:h-14 flex items-end gap-x-2 ${
             rowIndex > 0 ? "mt-1" : ""
           }`}
         >
@@ -193,19 +193,19 @@ export function MemberCard({ member }: MemberCardProps) {
 
   return (
     <div
-      className={`flex items-center rounded-3xl md:rounded-2xl bg-blue3
-    flex-row md:flex-col
-    max-w-9/10 md:max-w-none w-64 md:w-56 
-    max-h-[135px] md:max-h-96 h-fit
+      className={`flex items-center rounded-3xl sm:rounded-2xl bg-blue3
+    flex-row sm:flex-col
+    max-w-9/10 sm:max-w-none w-64 sm:w-56 
+    max-h-[135px] sm:max-h-96 h-fit
     flex-shrink-0 
-    py-5 px-4 md:p-5`}
+    py-5 px-4 sm:p-5`}
     >
       <div
         className="relative 
-      w-20 h-20 md:w-[150px] md:h-[150px] 
+      w-20 h-20 sm:w-[150px] sm:h-[150px] 
       rounded-full overflow-hidden bg-gray-300 
-      mb-0 md:mb-3
-      ml-0 mr-3 md:mx-auto
+      mb-0 sm:mb-3
+      ml-0 mr-3 sm:mx-auto
       flex-shrink-0"
       >
         <Image
@@ -216,15 +216,15 @@ export function MemberCard({ member }: MemberCardProps) {
         />
       </div>
 
-      <div className="flex flex-col w-full min-w-0 h-full gap-y-1 justify-center md:justify-between">
+      <div className="flex flex-col w-full min-w-0 h-full gap-y-1 justify-center sm:justify-between">
         <div>
-          <div className="md:mb-1 md:flex md:flex-col md:justify-center md:h-10">
+          <div className="sm:mb-1 sm:flex sm:flex-col sm:justify-center sm:h-10">
             <h3
               className={`${instrument_sans.className} 
-          text-xs  md:text-sm 
+          text-xs  sm:text-sm 
           font-bold text-white
-          mb-1.5  md:mb-0 
-          text-left md:text-center 
+          mb-1.5  sm:mb-0 
+          text-left sm:text-center 
           line-clamp-2 overflow-hidden text-ellipsis`}
             >
               {name}
@@ -237,15 +237,15 @@ export function MemberCard({ member }: MemberCardProps) {
           text-xs 
           text-white opacity-80
           mb-3 
-          text-left md:text-center 
+          text-left sm:text-center 
           truncate`}
           >
             {email}
           </p>
           */}
         </div>
 
-        <div className="flex flex-wrap gap-1 md:gap-2 w-full">
+        <div className="flex flex-wrap gap-1 sm:gap-2 w-full">
           {renderPositions()}
         </div>
       </div>