diff --git a/components/TeamMember.module.css b/components/TeamMember.module.css index 8fcecc92..d610ad27 100644 --- a/components/TeamMember.module.css +++ b/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 { diff --git a/components/TeamMemberCard.module.css b/components/TeamMemberCard.module.css index 68b0aff8..3a685090 100644 --- a/components/TeamMemberCard.module.css +++ b/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; diff --git a/components/TeamMemberCard.tsx b/components/TeamMemberCard.tsx index 046ed39c..b7ef2622 100644 --- a/components/TeamMemberCard.tsx +++ b/components/TeamMemberCard.tsx @@ -28,7 +28,7 @@ function TeamMemberInfo({ <>
{`Picture