Add responsive styling

components/TeamMemberCard.module.css

@@ -1,26 +1,26 @@
 .card {
-  --name-size: 2.25rem;
-  --role-size: 1.5rem;
-
   display: grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: calc(var(--name-size) + 0.75rem) calc(var(--role-size) + 0.75rem) auto;
+  grid-template-columns: 126px auto;
+  grid-template-rows: calc(2.25rem * 1.1) calc(1.5rem * 1.7) auto;
   grid-template-areas:
     "picture name"
     "picture role"
     "picture description";
-  column-gap: 1.875rem;
-  row-gap: 0.25rem;
+  column-gap: 2rem;
+  row-gap: 0;
   justify-items: start;
   align-items: start;
 
-  width: 53rem;
+  max-width: 847px;
 }
 
 .picture {
   grid-area: picture;
   justify-self: center;
 
+  max-width: 126px;
+  max-height: 126px;
+
   clip-path: circle(50%);
 }
 
@@ -29,7 +29,8 @@
   margin: 0;
 
   color: var(--blue-1);
-  font-size: var(--name-size);
+  font-size: 2.25rem;
+  line-height: 1.1;
   font-weight: 700;
 }
 
@@ -38,11 +39,73 @@
   margin: 0;
 
   color: var(--purple-2);
-  font-size: var(--role-size);
+  font-size: 1.5rem;
+  line-height: 1.7;
   font-weight: 600;
 }
 
 .description {
   grid-area: description;
   margin: 0;
+
+  line-height: 1.875;
+}
+
+@media screen and (max-width: 768px) {
+  .card {
+    grid-template-columns: 90px auto;
+    grid-template-rows: calc(1rem * 1.5) calc(1rem * 1.5) auto;
+    column-gap: 1.375rem;
+
+    max-width: 460px;
+  }
+
+  .picture {
+    max-width: 90px;
+    max-height: 90px;
+  }
+
+  .name,
+  .role,
+  .description {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  .card {
+    grid-template-columns: 70px auto;
+    grid-template-rows: auto calc(0.875rem * 1.5 + 0.75rem) auto;
+    grid-template-areas:
+      "picture name"
+      "picture role"
+      "description description";
+    column-gap: 1.4375rem;
+    align-items: end;
+
+    max-width: 190px;
+  }
+
+  .picture {
+    max-width: 70px;
+    max-height: 70px;
+  }
+
+  .name,
+  .role,
+  .description {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .role {
+    margin-bottom: 0.75rem;
+  }
+
+  .description {
+    justify-self: top;
+    margin-top: 0.75rem;
+    margin-left: 0.75rem;
+  }
 }

components/TeamMemberCard.tsx

@@ -12,17 +12,19 @@ interface TeamMemberCardProps {
 export function TeamMemberCard(props: TeamMemberCardProps) {
   return (
     <div className={styles.card}>
-      <Image
-        className={styles.picture}
-        src={
-          props.image !== undefined
-            ? props.image
-            : "/images/team-member-placeholder.svg"
-        }
-        width={126}
-        height={126}
-        alt={`Picture of ${props.name}`}
-      />
+      <div className={styles.picture}>
+        <Image
+          src={
+            props.image !== undefined
+              ? props.image
+              : "/images/team-member-placeholder.svg"
+          }
+          width={126}
+          height={126}
+          layout="intrinsic"
+          alt={`Picture of ${props.name}`}
+        />
+      </div>
       <h1 className={styles.name}>{props.name}</h1>
       <h2 className={styles.role}>{props.role}</h2>
       <p className={styles.description}>{props.children}</p>

pages/playground.mdx

@@ -39,7 +39,7 @@ The `<EventDescriptionCard />` component is used on the home page, and uses the
 The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
 display information about the execs: prez, VP, trez, AVP, and syscom overlord.
 
-<TeamMemberCard name="Codey" role="Mascot">
+<TeamMemberCard name="Codey" role="Mascot" image="/images/playground/codeyHi.png">
   The one, the only, Codey! Codey is ecstatic to be your mascot for this term.
   Codey loves programming and playing on their laptop. You can often find Codey
   posing for event promo graphics, or chilling in the CSC discord.