Ensure all images are squares

components/TeamMember.module.css

@@ -1,14 +1,15 @@
 .container {
-  max-width: calc(126rem / 16);
+  width: calc(126rem / 16);
   display: flex;
   flex-direction: column;
   margin: 0;
 }
 
 .img {
-  width: 100%;
-  border-radius: 50%;
-  margin: 0 auto;
+  width: calc(118rem / 16);
+  height: calc(118rem / 16);
+
+  clip-path: circle();
   object-fit: cover;
 }
 
@@ -29,7 +30,8 @@
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .img {
-    width: 100%;
+    width: calc(126rem / 16);
+    height: calc(126rem / 16);
   }
 
   .caption {

components/TeamMemberCard.module.css

@@ -18,11 +18,12 @@
   max-width: calc(126rem / 16);
   max-height: calc(126rem / 16);
 
-  clip-path: circle(50%);
+  clip-path: circle();
 }
 
 .image {
-  width: 100%;
+  width: calc(126rem / 16);
+  height: calc(126rem / 16);
 }
 
 .name {
@@ -112,10 +113,6 @@
   align-items: center;
 }
 
-.popupImage {
-  width: 100%;
-}
-
 .popupName {
   color: var(--primary-accent);
   margin: calc(24rem / 16) 0 0 0;

components/TeamMemberCard.tsx

@@ -28,7 +28,7 @@ function TeamMemberInfo({
     <>
       <div className={styles.picture}>
         <Image
-          className={isPopup ? styles.popupImage : styles.image}
+          className={styles.image}
           src={image}
           alt={`Picture of ${name}`}
         />