fix: team section layout

src/components/Team.css

@@ -3,10 +3,8 @@
 }
 
 #Team .Cards {
-  margin-top: 2.75em;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2.5rem;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 @media screen and (max-width: 800px) {

src/components/Team.tsx

@@ -5,11 +5,12 @@ import { shuffleFisherYates } from '../Utils';
 import './Team.css'
 
 function Teams() {
-  let [cards] = useState<any[]>([CreateCards(TeamData, true)]);
+  const [cards] = useState<any[]>([CreateCards(TeamData, true)]);
 
   return (
     <div id="Team">
-      <h1 className="TeamTitle mb-4 mt-5">Members</h1>
+      <h1 className="">Members</h1>
+      <div style={{ height: '24px' }} />
       <p>PSE is a team of 50 members, below you can find some of our team member's information.</p>
       <div className="Cards">{cards}</div>
     </div>
@@ -28,4 +29,4 @@ function CreateCards(cards: TeamMemberCardProps[], shuffle: boolean = true): JSX
   }
 
   return _cards
-}
+}

src/components/TeamMemberCard.css

@@ -2,31 +2,35 @@
   display: flex;
   justify-content: space-between;
   flex-direction: column;
+  margin-top: 4rem;
+  margin-right: 2rem;
+  width: 26.125rem;
 }
 
 .members-card-title {
   font-weight: 600;
-  font-size: 1.8rem;
-  line-height: 1.2;
-  padding-bottom: 1.5rem;
+  font-size: 2rem;
+  padding-bottom: 1rem;
 }
+
 .card-text {
-  font-size: 1.2rem;
-  line-height: 1.2rem;
+  line-height: 125%;
   padding-bottom: 1.5rem;
 }
+
 .members-card-footer {
-  border-top: 2px solid var(--gray);
+  border-top: 2px solid var(--black);
 }
 
 .members-card-footer a {
   display: flex;
   justify-content: space-between;
-  padding-block: 0.5em;
-  font-weight: 600;
-  font-size: 0.9rem;
+  padding: 1rem 0px;
+  font-weight: 700;
+  text-decoration: none;
+  color: var(--black);
 }
 
 .members-card-footer > *:not(:first-child) {
-  border-top: 2px solid var(--gray);
+  border-top: 2px solid var(--black);
 }

src/components/TeamMemberCard.tsx

@@ -139,7 +139,7 @@ function TeamMemberCard(props: TeamMemberCardProps) {
   return (
     <div className="members-card">
       <div className="members-card-body">
-        <h5 className="members-card-title">{props.name}</h5>
+        <div className="members-card-title">{props.name}</div>
         {renderDescription(props.description)}
       </div>
       <div className="members-card-footer">{links}</div>

src/index.css

@@ -11,6 +11,7 @@
   --gray-transparent: rgba(40, 42, 45, 0.5);
   --white: #fcfcfc;
   --box-shadow: -5px 3px 0px var(--gray);
+  --black: #151616;
 
   --twitter: #1da1f2;
   --telegram: #0088cc;
@@ -30,7 +31,7 @@
 }
 
 body {
-  color: var(--gray);
+  color: var(--black);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -40,6 +41,23 @@ body {
   font-family: "Inter", sans-serif;
 }
 
+h1 {
+  font-weight: 700;
+  font-size: 48px;
+  color: var(--black);
+  padding: 0px;
+  margin: 0px;
+}
+
+p {
+  color: var(--black);
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 120%;
+  padding: 0px;
+  margin: 0px;
+}
+
 /*
   Responsiveness
 */