Add mobile and desktop image sizes and section spacing (#223)

* Reduced Section.tsx margin and gaps on mobile

* Added md breakpoint so there is no effect to the desktop view

---------

Co-authored-by: Omar Khan <[email protected]>

Author: AnirudhMahesh13

src/app/(pages)/students/_components/Section.tsx

@@ -18,7 +18,7 @@ export default function Section({ team }: { team: TeamDataType }) {
       gap="less"
       titleSize="sm"
     >
-      <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-6">
+      <div className="-mx-2 grid grid-cols-2 gap-2 md:mx-auto md:grid-cols-4 md:gap-8 lg:grid-cols-6">
         {team.teamMembers.map(person => (
           <TeamProfile student={person} key={uuidv4()} />
         ))}

src/app/(pages)/students/_components/TeamProfile.tsx

@@ -10,7 +10,7 @@ function TeamProfileBase({ student, hover = false }: { student: StudentDataType;
         hover && 'transition duration-200 ease-in-out hover:scale-110 hover:bg-blueprint-50'
       }`}
     >
-      <div className="mb-2 flex h-32 w-32 items-center overflow-hidden rounded-full border-2 border-white">
+      <div className="mb-2 flex h-28 w-28 items-center overflow-hidden rounded-full border-2 border-white md:h-32 md:w-32">
         <Image
           src={student.imageUrl}
           width={128}