adjust styling for "our team"

Author: thelindat

components/DisplayMembers.tsx

@@ -78,7 +78,7 @@ const DisplayMembers = () => {
   return (
     <>
       {members?.data && (
-        <div className="mt-4 grid grid-cols-1 place-items-center gap-16 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4">
+        <div className="mt-4 grid grid-cols-2 place-items-center gap-y-6 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
           {members.data.map((member) =>
             MemberLink({
               image: member.avatar_url,

components/MemberLink.tsx

@@ -2,10 +2,10 @@ import { IconCoffee } from '@tabler/icons-react';
 
 const MemberLink: React.FC<{ image: string; name: string; sponsor?: string }> = ({ image, name, sponsor }) => {
   return (
-    <div key={name} className="flex w-32 flex-col items-center justify-center gap-2">
+    <div key={name} className="flex flex-col items-center justify-center gap-2">
       <a href={`https://github.com/${name}`} target="_blank" className="flex flex-col items-center gap-2">
         <p className="text-sky-500 font-semibold">{name}</p>
-        <img src={image} alt={`${name}-image`} className="rounded-md bg-neutral-100 shadow-md dark:bg-neutral-900" />
+        <img src={image} alt={`${name}-image`} className="w-24 rounded-md bg-neutral-100 shadow-md dark:bg-neutral-900" />
       </a>
       <a href={sponsor ? `https://ko-fi.com/${sponsor}` : ''} target="_blank" className="w-full">
         <button disabled={!sponsor} className='flex w-full items-center justify-center gap-2 rounded-md p-2 text-sky-500 bg-sky-500/20 hover:bg-sky-500/30 disabled:text-slate-500 disabled:bg-slate-500/20'>