/* The two people on the About page. Portrait frames, name beneath, then the
   biography - the order the client asked for ("two pictures ... with a name
   under them ... with a brief description about them"). */
.team {
  /* Bottom margin at the client's request, so the last row of the team block
     is not flush against the edge of its band. */
  list-style: none; margin: var(--space-12) 0 var(--space-8); padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  max-inline-size: 52rem; margin-inline: auto;
}
.team__member { text-align: center; }
.team__frame {
  display: block; overflow: hidden; background: var(--off-white);
  border-radius: 50%; max-inline-size: 15rem; margin-inline: auto;
}
.team__member img {
  aspect-ratio: 1; object-fit: cover; width: 100%; display: block;
}
/* Holds the circle until the portrait arrives. */
.team__empty {
  display: block; aspect-ratio: 1;
  background: radial-gradient(
    circle at 50% 38%,
    color-mix(in srgb, var(--rose-light) 55%, var(--off-white)) 0 38%,
    var(--off-white) 38% 100%
  );
}
.team__name {
  margin-block: var(--space-6) 0;
  font-size: 1.375rem;
}
.team__role {
  margin-block: var(--space-1) 0;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rose-deep);
}
.team__bio { margin-block-start: var(--space-4); color: var(--neutral); }
[dir="rtl"] .team__role { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }

@media (max-width: 40rem) {
  .team { grid-template-columns: 1fr; }
}

/* Centred prose, per the client. */
.team__bio { text-align: center; }