.team { position: relative; z-index: 1; background-color: #FFFFFF; }
.team .team-div { margin: 0 -18px; width: 100%; }
.team .team-member { display: inline-block; width: calc(33.3333% - 38px); height: 230px; margin: 18px; border: 1px solid #5A5A64; vertical-align: top; transition: all .5s ease-in-out; }
.team .team-member.primary { background-color: #00365B; }
.team .team-member.primary:hover { background-color: #002640; }
.team .team-member.secondary { background-color: #FFFFFF; }
.team .team-member.secondary:hover { background-color: #E5E5E6; }
.team .team-member .bio-image { display: inline-block; height: 230px; width: 230px; }
.team .team-member .bio-content { display: inline-block; width: calc(100% - 260px); vertical-align: top; padding: 30px 15px 0 15px; }
.team .team-member .bio-title { font-family: Inter, sans-serif; font-size: clamp(1.8rem, .5vw + 0.5rem, 2.0rem); font-weight: 600; line-height: clamp(2.5rem, .5vw + 1.2rem, 2.7rem); margin: 0; padding: 0; }
.team .team-member .title-line { background-color: #00ABBD; opacity: .5; margin: 10px 0; }
.team .team-member.primary .bio-title { color: #FFFFFF; }
.team .team-member.primary .bio-position { color: #FFFFFF; font-size: clamp(1.4rem, .5vw + 0.5rem, 1.6rem); font-weight: 400; line-height: clamp(2.1rem, .5vw + 1.2rem, 2.3rem); }
.team .team-member.secondary .bio-position { font-size: clamp(1.4rem, .5vw + 0.5rem, 1.6rem); font-weight: 400; line-height: clamp(2.1rem, .5vw + 1.2rem, 2.3rem); }

@media (max-width: 1650px) {
    .team .team-member { width: calc(50% - 38px); }
}

@media (max-width: 1200px) {
    .team .team-member { width: 100%; }
}

@media (max-width: 1024px) {
    .team .team-member { width: calc(100% - 30px); }
}

@media (max-width: 500px) {
    .team .team-member .bio-image { width: 130px; }
    .team .team-member .bio-content { width: calc(100% - 160px); }
}