Made page a little mobile-friendlier

src/components/About.tsx

@@ -28,20 +28,10 @@ function About() {
 
         <div style={{ marginTop: '8rem' }}>
           <h2 style={{ marginBottom: '4rem' }}>{t.team.title}</h2>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '4rem' }}>
+          <div className="team-grid">
             {[t.team.member1, t.team.member2, t.team.member3].map((member, i) => (
-              <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                <div style={{ 
-                  width: '180px', 
-                  height: '180px', 
-                  borderRadius: '50%', 
-                  backgroundColor: 'var(--bg-light)', 
-                  marginBottom: '1.5rem',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  border: '1px solid var(--border-color)'
-                }}>
+              <div key={i} className="team-member">
+                <div className="team-member-avatar" style={{ borderRadius: '50%' }}>
                   <span className="material-icons" style={{ fontSize: '4rem', opacity: 0.2 }}>person</span>
                 </div>
                 <h3 style={{ marginBottom: '0.5rem', fontSize: '1.3rem' }}>{member.name}</h3>