/* Team member pages (/Team-Smiles/<name>/<number>). Desktop numbers are the Wix measurements. */

.tm-wrap { background: var(--sky); }
.tm-person { background: #f9f9f9; }
.tm-person h1 { text-align: center; }
.tm-person .tm-name { display: block; font: 400 24px/1.2 var(--helv); letter-spacing: 1.92px; color: #333; }
.tm-person .tm-role { display: block; font: 400 18px/1.3 "EB Garamond", Garamond, Georgia, serif; color: var(--purple); margin-top: 2px; }
.tm-photo { border-radius: 50%; }
.tm-bio { font: 400 15px/20px var(--open); color: #666; }
.tm-grid { background: #fafafa; }
.tm-grid h2 { font-size: 59px; line-height: 70.8px; text-align: center; }
.tm-grid ul { list-style: none; margin: 0; padding: 0; display: grid; }
.tm-grid li a { display: block; background: #f9f9f9; text-align: center; text-decoration: none; height: 100%; }
.tm-grid img { border-radius: 50%; margin: 0 auto; }
.tm-grid .tm-name { display: block; font: 400 16px/19px var(--helv); letter-spacing: 1.28px; color: #333; margin-top: 20px; }
.tm-grid .tm-role { display: block; font: 400 12px/16px "EB Garamond", Garamond, Georgia, serif; color: var(--purple); margin-top: 14px; }
.tm-grid a:hover .tm-name { text-decoration: underline; }

@media (min-width: 1000px) {
  /* Wix size (1136px) fits up to 4 rows of 3 people; more people or a long bio make the page taller */
  .tm-wrap .w { min-height: max(1136px, calc(96px + var(--rows, 3) * 224px + 40px)); display: grid; grid-template-columns: 490px 490px; }
  .tm-person { position: relative; margin-left: 9px; width: 479px; box-shadow: -9px 0 0 #fafafa; }
  .tm-photo { position: absolute; left: 28px; top: 35px; width: 195px; height: 195px; }
  .tm-person h1 { position: absolute; left: 232px; top: 113px; width: 180px; }
  .tm-person { padding: 262px 0 40px 17px; }
  .tm-bio { width: 445px; }
  .tm-grid { position: relative; }
  .tm-grid h2 { position: absolute; left: 69px; top: 5px; width: 338px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; }
  .tm-grid ul { position: absolute; left: -28px; top: 96px; grid-template-columns: repeat(3, 156px); grid-auto-rows: 204px; column-gap: 9px; row-gap: 20px; }
  .tm-grid li a { padding-top: 24px; }
  .tm-grid img { width: 91px; height: 91px; }
}

@media (max-width: 999.98px) {
  .tm-wrap .w { padding: 0 0 20px; }
  .tm-person { padding: 26px 20px 28px; display: grid; justify-items: center; gap: 12px; }
  .tm-photo { width: 170px; height: 170px; }
  .tm-bio { font-size: 16px; line-height: 1.6; max-width: 40em; }
  .tm-bio p + p { margin-top: 10px; }
  .tm-grid { padding: 24px 14px 10px; }
  .tm-grid h2 { font-size: clamp(36px, 10vw, 52px); line-height: 1.2; }
  .tm-grid ul { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
  .tm-grid li a { padding: 14px 4px; }
  .tm-grid img { width: 72px; height: 72px; }
  .tm-grid .tm-name { margin-top: 10px; font-size: 15px; }
  .tm-grid .tm-role { margin-top: 4px; }
}