Team Member Cards in CSS, Bootstrap & Tailwind

<div><span class="lbl">Four-up team grid</span>
<ul class="tm" aria-label="Design and engineering team">
  <li class="tm-card">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#ccfbf1"/><path d="M22.5 39c0-14 7.6-22 17.5-22s17.5 8 17.5 22v23h-35z" fill="#1f1410"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#0f766e"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#c58c64"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#c58c64"/><path d="M25 35.5c1-10.2 7-16.5 15-16.5s14.4 6.3 15 16.5c-6.4-1-12-5-15-10.4-3 5.4-8.6 9.4-15 10.4z" fill="#1f1410"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Priya Natarajan</h3>
    <p class="tm-role">Head of design</p>
    <p class="tm-bio">Runs the design system and Friday critique. Spent six years on airline booking flows before joining.</p>
    <ul class="tm-social">
      <li><a href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Priya Natarajan on LinkedIn</span></a></li>
      <li><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3.6 9.6c5.2.4 10-1 13.8-4.6M5.6 18.6c3-4.6 8-6.6 15-5M8.8 3.6c3.4 4 6 10 6.8 16.8"/></svg><span class="sr-only">Priya Natarajan on Dribbble</span></a></li>
      <li><a href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Priya Natarajan</span></a></li>
    </ul>
  </li>
  <li class="tm-card">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#dbeafe"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#1d4ed8"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#f2c9a6"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#f2c9a6"/><path d="M24.7 35.5c-.8-10.6 6-17.3 15.3-17.3 9.6 0 16 7 15.3 17.3-9.4 0-15-3.4-17.4-8.4-2.4 4.6-6.6 7.6-13.2 8.4z" fill="#8a5a2b"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><g fill="none" stroke="#1f1a17" stroke-width="1.5"><circle cx="34.5" cy="38.5" r="4.4"/><circle cx="45.5" cy="38.5" r="4.4"/><path d="M38.9 38.2h2.2"/></g></svg></span>
    <h3 class="tm-name">Jonas Becker</h3>
    <p class="tm-role">Engineering lead</p>
    <p class="tm-bio">Keeps the build under four minutes. Maintains our open-source date library in his spare time.</p>
    <ul class="tm-social">
      <li><a href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Jonas Becker on LinkedIn</span></a></li>
      <li><a href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="sr-only">Jonas Becker on GitHub</span></a></li>
      <li><a href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Jonas Becker</span></a></li>
    </ul>
  </li>
  <li class="tm-card">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#fef3c7"/><circle cx="40" cy="17.5" r="7.5" fill="#22140d"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#b45309"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#8d5a3b"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#8d5a3b"/><path d="M25 36.5c0-10.4 6.6-17 15-17s15 6.6 15 17c-4.4-3.4-9.6-8-15-8s-10.6 4.6-15 8z" fill="#22140d"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Aiyana Brooks</h3>
    <p class="tm-role">Customer success</p>
    <p class="tm-bio">Onboards every new studio account herself and turns their questions into help-centre articles.</p>
    <ul class="tm-social">
      <li><a href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Aiyana Brooks on LinkedIn</span></a></li>
      <li><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z"/></svg><span class="sr-only">Aiyana Brooks's website</span></a></li>
      <li><a href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Aiyana Brooks</span></a></li>
    </ul>
  </li>
  <li class="tm-card">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#ede9fe"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#7c3aed"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#d7a27c"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#d7a27c"/><path d="M26 38.5c.6 10.4 6 16.5 14 16.5s13.4-6.1 14-16.5c-2.6 3.6-6 5.2-8 5.2-1.6-1.8-3.6-2.6-6-2.6s-4.4.8-6 2.6c-2 0-5.4-1.6-8-5.2z" fill="#3b2416"/><path d="M26.2 33c.6-9 6.4-14.6 13.8-14.6s13.2 5.6 13.8 14.6c-3.4-3-8-4.6-13.8-4.6s-10.4 1.6-13.8 4.6z" fill="#3b2416"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M36.6 46.4q3.4 2 6.8 0" stroke="#f4e8dc" stroke-width="1.7" fill="none" stroke-linecap="round"/></svg></span>
    <h3 class="tm-name">Mateo Silva</h3>
    <p class="tm-role">Data analyst</p>
    <p class="tm-bio">Builds the weekly retention report and the dashboards the whole company checks on Monday.</p>
    <ul class="tm-social">
      <li><a href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Mateo Silva on LinkedIn</span></a></li>
      <li><a href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="sr-only">Mateo Silva on GitHub</span></a></li>
      <li><a href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Mateo Silva</span></a></li>
    </ul>
  </li>
</ul></div>

<div><span class="lbl">Wide cards with department and email</span>
<ul class="tm tm-wide" aria-label="Product and support team">
  <li class="tm-card">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#ffe4e6"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#be123c"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#f1cfae"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#f1cfae"/><path d="M24.7 36.5c-1.2-11 5.8-18.3 15.6-18.3 9.4 0 16.3 6.8 15.4 17.6-4.6-2-9-5.6-11.4-9.6-4 5.2-11.2 9-19.6 10.3z" fill="#111827"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Hana Kobayashi</h3>
    <p class="tm-role">Product manager, growth</p>
    <p class="tm-dept">Product</p>
    <p class="tm-bio">Owns signup and the first week of every new account. Ran 38 onboarding experiments last year and shipped the 11 that worked.</p>
    <div class="tm-foot">
      <a class="tm-mail" href="mailto:[email protected]"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg>[email protected]</a>
      <ul class="tm-social">
        <li><a href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Hana Kobayashi on LinkedIn</span></a></li>
        <li><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z"/></svg><span class="sr-only">Hana Kobayashi's website</span></a></li>
      </ul>
    </div>
  </li>
  <li class="tm-card">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#e0f2fe"/><g fill="#1a0f0a"><circle cx="26" cy="38" r="6"/><circle cx="54" cy="38" r="6"/></g><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#0369a1"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#6b4029"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#6b4029"/><g fill="#1a0f0a"><circle cx="27.5" cy="30" r="6.5"/><circle cx="33.5" cy="23.5" r="7"/><circle cx="41" cy="21.5" r="7.5"/><circle cx="48.5" cy="24" r="7"/><circle cx="53" cy="31" r="6"/></g><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Kwame Mensah</h3>
    <p class="tm-role">Support engineer</p>
    <p class="tm-dept">Support</p>
    <p class="tm-bio">Answers the hardest tickets and writes the fix-it guides. Median first reply time on his queue is 14 minutes.</p>
    <div class="tm-foot">
      <a class="tm-mail" href="mailto:[email protected]"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg>[email protected]</a>
      <ul class="tm-social">
        <li><a href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Kwame Mensah on LinkedIn</span></a></li>
        <li><a href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="sr-only">Kwame Mensah on GitHub</span></a></li>
      </ul>
    </div>
  </li>
</ul></div>

/* Team member cards: an illustrated SVG avatar, name, role, a short bio and a list of social links with full accessible names. */
.tm{--tm-accent:#0f766e;--tm-accent-dark:#115e59;--tm-ink:#1f2328;--tm-muted:#59616e;--tm-line:#e7e3da;--tm-chip:#f3f1ec;--tm-icon:#3f4650;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:22px;list-style:none;margin:0;padding:0;color:var(--tm-ink)}
.tm :where(h3,p,ul){margin:0;padding:0}
.tm-card{display:flex;flex-direction:column;align-items:center;padding:28px 22px 22px;background:#fff;border:1px solid var(--tm-line);border-radius:22px;text-align:center;
  transition:transform .25s,box-shadow .25s}
.tm-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -26px rgba(31,35,40,.4)}
.tm-av{display:block;width:104px;height:104px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--tm-line)}
.tm-av svg{display:block;width:100%;height:100%}
.tm-name{margin-top:18px;font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.tm-role{margin-top:4px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tm-accent)}
.tm-bio{margin-top:12px;font-size:.9rem;line-height:1.55;color:var(--tm-muted);flex:1}
.tm-social{display:flex;justify-content:center;gap:8px;list-style:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--tm-line);width:100%}
.tm-social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--tm-chip);color:var(--tm-icon);transition:background-color .2s,color .2s}
.tm-social a:hover{background:var(--tm-accent);color:#fff}
.tm-social a:focus-visible{outline:3px solid var(--tm-accent);outline-offset:2px}
.tm-social svg{width:18px;height:18px}
/* wide variant: avatar on the left, a department tag and an email line */
.tm-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.tm-wide .tm-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr auto;align-items:start;gap:4px 20px;padding:24px;text-align:left}
.tm-wide .tm-av{grid-row:span 4;width:84px;height:84px;border-radius:24px;box-shadow:none}
.tm-wide .tm-name{margin-top:2px}
.tm-dept{justify-self:start;margin-top:8px;padding:4px 10px;border-radius:999px;background:#ccfbf1;color:#115e59;font-size:.75rem;font-weight:700}
.tm-wide .tm-bio{margin-top:10px}
.tm-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--tm-line)}
.tm-mail{display:inline-flex;align-items:center;gap:8px;color:var(--tm-ink);font-size:.9rem;font-weight:600;text-decoration:underline;text-decoration-color:var(--tm-line);text-underline-offset:4px;text-decoration-thickness:2px}
.tm-mail:hover{text-decoration-color:var(--tm-accent)}
.tm-mail:focus-visible{outline:3px solid var(--tm-accent);outline-offset:3px;border-radius:4px}
.tm-wide .tm-social{width:auto;margin:0;padding:0;border:0}
@media (max-width:420px){.tm-wide .tm-card{grid-template-columns:1fr}.tm-wide .tm-av{grid-row:auto;margin-bottom:12px}}
.tm .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.tm-card,.tm-social a{transition:none}.tm-card:hover{transform:none}}

<div><span class="lbl">Four-up team grid</span>
<ul class="tm row row-cols-1 row-cols-sm-2 row-cols-lg-4 list-unstyled" aria-label="Design and engineering team">
  <li class="col"><div class="card tm-card h-100 align-items-center text-center">
    <span class="tm-av rounded-circle"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#ccfbf1"/><path d="M22.5 39c0-14 7.6-22 17.5-22s17.5 8 17.5 22v23h-35z" fill="#1f1410"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#0f766e"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#c58c64"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#c58c64"/><path d="M25 35.5c1-10.2 7-16.5 15-16.5s14.4 6.3 15 16.5c-6.4-1-12-5-15-10.4-3 5.4-8.6 9.4-15 10.4z" fill="#1f1410"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Priya Natarajan</h3>
    <p class="tm-role">Head of design</p>
    <p class="tm-bio flex-grow-1">Runs the design system and Friday critique. Spent six years on airline booking flows before joining.</p>
    <ul class="tm-social d-flex justify-content-center list-unstyled w-100">
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="visually-hidden">Priya Natarajan on LinkedIn</span></a></li>
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false" width="18" height="18"><circle cx="12" cy="12" r="9"/><path d="M3.6 9.6c5.2.4 10-1 13.8-4.6M5.6 18.6c3-4.6 8-6.6 15-5M8.8 3.6c3.4 4 6 10 6.8 16.8"/></svg><span class="visually-hidden">Priya Natarajan on Dribbble</span></a></li>
      <li><a class="rounded-circle" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="visually-hidden">Email Priya Natarajan</span></a></li>
    </ul>
  </div></li>
  <li class="col"><div class="card tm-card h-100 align-items-center text-center">
    <span class="tm-av rounded-circle"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#dbeafe"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#1d4ed8"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#f2c9a6"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#f2c9a6"/><path d="M24.7 35.5c-.8-10.6 6-17.3 15.3-17.3 9.6 0 16 7 15.3 17.3-9.4 0-15-3.4-17.4-8.4-2.4 4.6-6.6 7.6-13.2 8.4z" fill="#8a5a2b"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><g fill="none" stroke="#1f1a17" stroke-width="1.5"><circle cx="34.5" cy="38.5" r="4.4"/><circle cx="45.5" cy="38.5" r="4.4"/><path d="M38.9 38.2h2.2"/></g></svg></span>
    <h3 class="tm-name">Jonas Becker</h3>
    <p class="tm-role">Engineering lead</p>
    <p class="tm-bio flex-grow-1">Keeps the build under four minutes. Maintains our open-source date library in his spare time.</p>
    <ul class="tm-social d-flex justify-content-center list-unstyled w-100">
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="visually-hidden">Jonas Becker on LinkedIn</span></a></li>
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="visually-hidden">Jonas Becker on GitHub</span></a></li>
      <li><a class="rounded-circle" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="visually-hidden">Email Jonas Becker</span></a></li>
    </ul>
  </div></li>
  <li class="col"><div class="card tm-card h-100 align-items-center text-center">
    <span class="tm-av rounded-circle"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#fef3c7"/><circle cx="40" cy="17.5" r="7.5" fill="#22140d"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#b45309"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#8d5a3b"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#8d5a3b"/><path d="M25 36.5c0-10.4 6.6-17 15-17s15 6.6 15 17c-4.4-3.4-9.6-8-15-8s-10.6 4.6-15 8z" fill="#22140d"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Aiyana Brooks</h3>
    <p class="tm-role">Customer success</p>
    <p class="tm-bio flex-grow-1">Onboards every new studio account herself and turns their questions into help-centre articles.</p>
    <ul class="tm-social d-flex justify-content-center list-unstyled w-100">
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="visually-hidden">Aiyana Brooks on LinkedIn</span></a></li>
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z"/></svg><span class="visually-hidden">Aiyana Brooks's website</span></a></li>
      <li><a class="rounded-circle" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="visually-hidden">Email Aiyana Brooks</span></a></li>
    </ul>
  </div></li>
  <li class="col"><div class="card tm-card h-100 align-items-center text-center">
    <span class="tm-av rounded-circle"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#ede9fe"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#7c3aed"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#d7a27c"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#d7a27c"/><path d="M26 38.5c.6 10.4 6 16.5 14 16.5s13.4-6.1 14-16.5c-2.6 3.6-6 5.2-8 5.2-1.6-1.8-3.6-2.6-6-2.6s-4.4.8-6 2.6c-2 0-5.4-1.6-8-5.2z" fill="#3b2416"/><path d="M26.2 33c.6-9 6.4-14.6 13.8-14.6s13.2 5.6 13.8 14.6c-3.4-3-8-4.6-13.8-4.6s-10.4 1.6-13.8 4.6z" fill="#3b2416"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M36.6 46.4q3.4 2 6.8 0" stroke="#f4e8dc" stroke-width="1.7" fill="none" stroke-linecap="round"/></svg></span>
    <h3 class="tm-name">Mateo Silva</h3>
    <p class="tm-role">Data analyst</p>
    <p class="tm-bio flex-grow-1">Builds the weekly retention report and the dashboards the whole company checks on Monday.</p>
    <ul class="tm-social d-flex justify-content-center list-unstyled w-100">
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="visually-hidden">Mateo Silva on LinkedIn</span></a></li>
      <li><a class="rounded-circle" href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="visually-hidden">Mateo Silva on GitHub</span></a></li>
      <li><a class="rounded-circle" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="visually-hidden">Email Mateo Silva</span></a></li>
    </ul>
  </div></li>
</ul></div>

<div><span class="lbl">Wide cards with department and email</span>
<ul class="tm tm-wide row row-cols-1 row-cols-lg-2 list-unstyled" aria-label="Product and support team">
  <li class="col"><div class="card tm-card h-100">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#ffe4e6"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#be123c"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#f1cfae"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#f1cfae"/><path d="M24.7 36.5c-1.2-11 5.8-18.3 15.6-18.3 9.4 0 16.3 6.8 15.4 17.6-4.6-2-9-5.6-11.4-9.6-4 5.2-11.2 9-19.6 10.3z" fill="#111827"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Hana Kobayashi</h3>
    <p class="tm-role">Product manager, growth</p>
    <p class="tm-dept badge rounded-pill">Product</p>
    <p class="tm-bio">Owns signup and the first week of every new account. Ran 38 onboarding experiments last year and shipped the 11 that worked.</p>
    <div class="tm-foot d-flex flex-wrap align-items-center justify-content-between">
      <a class="tm-mail d-inline-flex align-items-center gap-2" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg>[email protected]</a>
      <ul class="tm-social d-flex list-unstyled">
        <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="visually-hidden">Hana Kobayashi on LinkedIn</span></a></li>
        <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z"/></svg><span class="visually-hidden">Hana Kobayashi's website</span></a></li>
      </ul>
    </div>
  </div></li>
  <li class="col"><div class="card tm-card h-100">
    <span class="tm-av"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><rect width="80" height="80" fill="#e0f2fe"/><g fill="#1a0f0a"><circle cx="26" cy="38" r="6"/><circle cx="54" cy="38" r="6"/></g><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#0369a1"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#6b4029"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#6b4029"/><g fill="#1a0f0a"><circle cx="27.5" cy="30" r="6.5"/><circle cx="33.5" cy="23.5" r="7"/><circle cx="41" cy="21.5" r="7.5"/><circle cx="48.5" cy="24" r="7"/><circle cx="53" cy="31" r="6"/></g><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="tm-name">Kwame Mensah</h3>
    <p class="tm-role">Support engineer</p>
    <p class="tm-dept badge rounded-pill">Support</p>
    <p class="tm-bio">Answers the hardest tickets and writes the fix-it guides. Median first reply time on his queue is 14 minutes.</p>
    <div class="tm-foot d-flex flex-wrap align-items-center justify-content-between">
      <a class="tm-mail d-inline-flex align-items-center gap-2" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg>[email protected]</a>
      <ul class="tm-social d-flex list-unstyled">
        <li><a class="rounded-circle" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="visually-hidden">Kwame Mensah on LinkedIn</span></a></li>
        <li><a class="rounded-circle" href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="visually-hidden">Kwame Mensah on GitHub</span></a></li>
      </ul>
    </div>
  </div></li>
</ul></div>

/* Team member cards on Bootstrap's grid (.row-cols-*), .card and .badge; the avatar is an inline SVG illustration. */
.tm{--tm-accent:#0f766e;--tm-ink:#1f2328;--tm-muted:#59616e;--tm-line:#e7e3da;--tm-chip:#f3f1ec;--tm-icon:#3f4650;--bs-gutter-x:22px;--bs-gutter-y:22px;margin-bottom:0;color:var(--tm-ink)}
.tm :where(h3,p,ul){margin:0}
.tm-card{--bs-card-border-color:var(--tm-line);--bs-card-border-radius:22px;--bs-card-color:var(--tm-ink);padding:28px 22px 22px;transition:transform .25s,box-shadow .25s}
.tm-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -26px rgba(31,35,40,.4)}
.tm-av{display:block;flex:none;width:104px;height:104px;overflow:hidden;box-shadow:0 0 0 6px #fff,0 0 0 7px var(--tm-line)}
.tm-av svg{display:block;width:100%;height:100%}
.tm .tm-name{margin-top:18px;font-size:1.1rem;font-weight:700;letter-spacing:-.01em;line-height:normal}
.tm-role{margin-top:4px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tm-accent)}
.tm .tm-bio{margin-top:12px;font-size:.9rem;line-height:1.55;color:var(--tm-muted)}
.tm-social{gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--tm-line)}
.tm-social a{display:grid;place-items:center;width:38px;height:38px;background:var(--tm-chip);color:var(--tm-icon);transition:background-color .2s,color .2s}
.tm-social a:hover{background:var(--tm-accent);color:#fff}
.tm-social a:focus-visible{outline:3px solid var(--tm-accent);outline-offset:2px}
/* wide variant */
.tm-wide .tm-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr auto;align-items:start;gap:4px 20px;padding:24px}
.tm-wide .tm-av{grid-row:span 4;width:84px;height:84px;border-radius:24px;box-shadow:none}
.tm-wide .tm-name{margin-top:2px}
.tm-dept{--bs-badge-padding-x:10px;--bs-badge-padding-y:4px;--bs-badge-font-size:.75rem;--bs-badge-font-weight:700;--bs-badge-color:#115e59;justify-self:start;margin-top:8px;background:#ccfbf1}
.tm-wide .tm-bio{margin-top:10px}
.tm-foot{grid-column:1/-1;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--tm-line)}
.tm-mail{color:var(--tm-ink);font-size:.9rem;font-weight:600;text-decoration-color:var(--tm-line);text-underline-offset:4px;text-decoration-thickness:2px}
.tm-mail:hover{color:var(--tm-ink);text-decoration-color:var(--tm-accent)}
.tm-mail:focus-visible{outline:3px solid var(--tm-accent);outline-offset:3px;border-radius:4px}
.tm-wide .tm-social{margin:0;padding:0;border:0}
@media (max-width:420px){.tm-wide .tm-card{grid-template-columns:1fr}.tm-wide .tm-av{grid-row:auto;margin-bottom:12px}}
@media (prefers-reduced-motion:reduce){.tm-card,.tm-social a{transition:none}.tm-card:hover{transform:none}}

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#59616e] uppercase">Four-up team grid</span>
<ul class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,220px),1fr))] gap-[22px] text-[#1f2328]" aria-label="Design and engineering team">
  <li class="flex flex-col items-center rounded-[22px] border border-[#e7e3da] bg-white px-[22px] pt-7 pb-[22px] text-center transition-[transform,box-shadow] duration-[250ms] hover:-translate-y-1 hover:shadow-[0_24px_40px_-26px_rgba(31,35,40,.4)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <span class="block size-[104px] overflow-hidden rounded-full shadow-[0_0_0_6px_#fff,0_0_0_7px_#e7e3da]"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false" class="block size-full"><rect width="80" height="80" fill="#ccfbf1"/><path d="M22.5 39c0-14 7.6-22 17.5-22s17.5 8 17.5 22v23h-35z" fill="#1f1410"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#0f766e"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#c58c64"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#c58c64"/><path d="M25 35.5c1-10.2 7-16.5 15-16.5s14.4 6.3 15 16.5c-6.4-1-12-5-15-10.4-3 5.4-8.6 9.4-15 10.4z" fill="#1f1410"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="mt-[18px] text-[1.1rem] font-bold tracking-[-.01em]">Priya Natarajan</h3>
    <p class="mt-1 text-[.78rem] font-bold tracking-[.1em] text-[#0f766e] uppercase">Head of design</p>
    <p class="mt-3 flex-1 text-[.9rem] leading-[1.55] text-[#59616e]">Runs the design system and Friday critique. Spent six years on airline booking flows before joining.</p>
    <ul class="flex gap-2 mt-[18px] w-full justify-center border-t border-[#e7e3da] pt-[18px]">
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Priya Natarajan on LinkedIn</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true" focusable="false" width="18" height="18"><circle cx="12" cy="12" r="9"/><path d="M3.6 9.6c5.2.4 10-1 13.8-4.6M5.6 18.6c3-4.6 8-6.6 15-5M8.8 3.6c3.4 4 6 10 6.8 16.8"/></svg><span class="sr-only">Priya Natarajan on Dribbble</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Priya Natarajan</span></a></li>
    </ul>
  </li>
  <li class="flex flex-col items-center rounded-[22px] border border-[#e7e3da] bg-white px-[22px] pt-7 pb-[22px] text-center transition-[transform,box-shadow] duration-[250ms] hover:-translate-y-1 hover:shadow-[0_24px_40px_-26px_rgba(31,35,40,.4)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <span class="block size-[104px] overflow-hidden rounded-full shadow-[0_0_0_6px_#fff,0_0_0_7px_#e7e3da]"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false" class="block size-full"><rect width="80" height="80" fill="#dbeafe"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#1d4ed8"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#f2c9a6"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#f2c9a6"/><path d="M24.7 35.5c-.8-10.6 6-17.3 15.3-17.3 9.6 0 16 7 15.3 17.3-9.4 0-15-3.4-17.4-8.4-2.4 4.6-6.6 7.6-13.2 8.4z" fill="#8a5a2b"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><g fill="none" stroke="#1f1a17" stroke-width="1.5"><circle cx="34.5" cy="38.5" r="4.4"/><circle cx="45.5" cy="38.5" r="4.4"/><path d="M38.9 38.2h2.2"/></g></svg></span>
    <h3 class="mt-[18px] text-[1.1rem] font-bold tracking-[-.01em]">Jonas Becker</h3>
    <p class="mt-1 text-[.78rem] font-bold tracking-[.1em] text-[#0f766e] uppercase">Engineering lead</p>
    <p class="mt-3 flex-1 text-[.9rem] leading-[1.55] text-[#59616e]">Keeps the build under four minutes. Maintains our open-source date library in his spare time.</p>
    <ul class="flex gap-2 mt-[18px] w-full justify-center border-t border-[#e7e3da] pt-[18px]">
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Jonas Becker on LinkedIn</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="sr-only">Jonas Becker on GitHub</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Jonas Becker</span></a></li>
    </ul>
  </li>
  <li class="flex flex-col items-center rounded-[22px] border border-[#e7e3da] bg-white px-[22px] pt-7 pb-[22px] text-center transition-[transform,box-shadow] duration-[250ms] hover:-translate-y-1 hover:shadow-[0_24px_40px_-26px_rgba(31,35,40,.4)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <span class="block size-[104px] overflow-hidden rounded-full shadow-[0_0_0_6px_#fff,0_0_0_7px_#e7e3da]"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false" class="block size-full"><rect width="80" height="80" fill="#fef3c7"/><circle cx="40" cy="17.5" r="7.5" fill="#22140d"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#b45309"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#8d5a3b"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#8d5a3b"/><path d="M25 36.5c0-10.4 6.6-17 15-17s15 6.6 15 17c-4.4-3.4-9.6-8-15-8s-10.6 4.6-15 8z" fill="#22140d"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="mt-[18px] text-[1.1rem] font-bold tracking-[-.01em]">Aiyana Brooks</h3>
    <p class="mt-1 text-[.78rem] font-bold tracking-[.1em] text-[#0f766e] uppercase">Customer success</p>
    <p class="mt-3 flex-1 text-[.9rem] leading-[1.55] text-[#59616e]">Onboards every new studio account herself and turns their questions into help-centre articles.</p>
    <ul class="flex gap-2 mt-[18px] w-full justify-center border-t border-[#e7e3da] pt-[18px]">
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Aiyana Brooks on LinkedIn</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z"/></svg><span class="sr-only">Aiyana Brooks's website</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Aiyana Brooks</span></a></li>
    </ul>
  </li>
  <li class="flex flex-col items-center rounded-[22px] border border-[#e7e3da] bg-white px-[22px] pt-7 pb-[22px] text-center transition-[transform,box-shadow] duration-[250ms] hover:-translate-y-1 hover:shadow-[0_24px_40px_-26px_rgba(31,35,40,.4)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <span class="block size-[104px] overflow-hidden rounded-full shadow-[0_0_0_6px_#fff,0_0_0_7px_#e7e3da]"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false" class="block size-full"><rect width="80" height="80" fill="#ede9fe"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#7c3aed"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#d7a27c"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#d7a27c"/><path d="M26 38.5c.6 10.4 6 16.5 14 16.5s13.4-6.1 14-16.5c-2.6 3.6-6 5.2-8 5.2-1.6-1.8-3.6-2.6-6-2.6s-4.4.8-6 2.6c-2 0-5.4-1.6-8-5.2z" fill="#3b2416"/><path d="M26.2 33c.6-9 6.4-14.6 13.8-14.6s13.2 5.6 13.8 14.6c-3.4-3-8-4.6-13.8-4.6s-10.4 1.6-13.8 4.6z" fill="#3b2416"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M36.6 46.4q3.4 2 6.8 0" stroke="#f4e8dc" stroke-width="1.7" fill="none" stroke-linecap="round"/></svg></span>
    <h3 class="mt-[18px] text-[1.1rem] font-bold tracking-[-.01em]">Mateo Silva</h3>
    <p class="mt-1 text-[.78rem] font-bold tracking-[.1em] text-[#0f766e] uppercase">Data analyst</p>
    <p class="mt-3 flex-1 text-[.9rem] leading-[1.55] text-[#59616e]">Builds the weekly retention report and the dashboards the whole company checks on Monday.</p>
    <ul class="flex gap-2 mt-[18px] w-full justify-center border-t border-[#e7e3da] pt-[18px]">
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Mateo Silva on LinkedIn</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="sr-only">Mateo Silva on GitHub</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg><span class="sr-only">Email Mateo Silva</span></a></li>
    </ul>
  </li>
</ul></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#59616e] uppercase">Wide cards with department and email</span>
<ul class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,400px),1fr))] gap-[22px] text-[#1f2328]" aria-label="Product and support team">
  <li class="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto_1fr_auto] items-start gap-x-5 gap-y-1 rounded-[22px] border border-[#e7e3da] bg-white p-6 transition-[transform,box-shadow] duration-[250ms] hover:-translate-y-1 hover:shadow-[0_24px_40px_-26px_rgba(31,35,40,.4)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 max-[420px]:grid-cols-1">
    <span class="row-span-4 block size-[84px] overflow-hidden rounded-3xl max-[420px]:row-auto max-[420px]:mb-3"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false" class="block size-full"><rect width="80" height="80" fill="#ffe4e6"/><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#be123c"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#f1cfae"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#f1cfae"/><path d="M24.7 36.5c-1.2-11 5.8-18.3 15.6-18.3 9.4 0 16.3 6.8 15.4 17.6-4.6-2-9-5.6-11.4-9.6-4 5.2-11.2 9-19.6 10.3z" fill="#111827"/><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="mt-0.5 text-[1.1rem] font-bold tracking-[-.01em]">Hana Kobayashi</h3>
    <p class="mt-1 text-[.78rem] font-bold tracking-[.1em] text-[#0f766e] uppercase">Product manager, growth</p>
    <p class="mt-2 justify-self-start rounded-full bg-[#ccfbf1] px-2.5 py-1 text-[.75rem] font-bold text-[#115e59]">Product</p>
    <p class="mt-2.5 text-[.9rem] leading-[1.55] text-[#59616e]">Owns signup and the first week of every new account. Ran 38 onboarding experiments last year and shipped the 11 that worked.</p>
    <div class="col-span-full mt-[18px] flex flex-wrap items-center justify-between gap-3 border-t border-[#e7e3da] pt-4">
      <a class="inline-flex items-center gap-2 rounded text-[.9rem] font-semibold text-[#1f2328] underline decoration-[#e7e3da] decoration-2 underline-offset-4 hover:decoration-[#0f766e] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg>[email protected]</a>
      <ul class="flex gap-2 ">
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Hana Kobayashi on LinkedIn</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z"/></svg><span class="sr-only">Hana Kobayashi's website</span></a></li>
    </ul>
    </div>
  </li>
  <li class="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto_1fr_auto] items-start gap-x-5 gap-y-1 rounded-[22px] border border-[#e7e3da] bg-white p-6 transition-[transform,box-shadow] duration-[250ms] hover:-translate-y-1 hover:shadow-[0_24px_40px_-26px_rgba(31,35,40,.4)] motion-reduce:transition-none motion-reduce:hover:translate-y-0 max-[420px]:grid-cols-1">
    <span class="row-span-4 block size-[84px] overflow-hidden rounded-3xl max-[420px]:row-auto max-[420px]:mb-3"><svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false" class="block size-full"><rect width="80" height="80" fill="#e0f2fe"/><g fill="#1a0f0a"><circle cx="26" cy="38" r="6"/><circle cx="54" cy="38" r="6"/></g><path d="M12 80c1-14 12-22 28-22s27 8 28 22z" fill="#0369a1"/><path d="M34.5 49h11v8.5c-2.5 2.6-8.5 2.6-11 0z" fill="#6b4029"/><path d="M34.5 53.5c3.6 1.6 7.4 1.6 11 0v-3h-11z" fill="#000" opacity=".12"/><circle cx="40" cy="37" r="15" fill="#6b4029"/><g fill="#1a0f0a"><circle cx="27.5" cy="30" r="6.5"/><circle cx="33.5" cy="23.5" r="7"/><circle cx="41" cy="21.5" r="7.5"/><circle cx="48.5" cy="24" r="7"/><circle cx="53" cy="31" r="6"/></g><circle cx="34.5" cy="38.5" r="1.7" fill="#1f1a17"/><circle cx="45.5" cy="38.5" r="1.7" fill="#1f1a17"/><path d="M35.8 44.6q4.2 3.2 8.4 0" stroke="#1f1a17" stroke-width="1.7" fill="none" stroke-linecap="round"/><circle cx="31" cy="43" r="2.4" fill="#e8746a" opacity=".35"/><circle cx="49" cy="43" r="2.4" fill="#e8746a" opacity=".35"/></svg></span>
    <h3 class="mt-0.5 text-[1.1rem] font-bold tracking-[-.01em]">Kwame Mensah</h3>
    <p class="mt-1 text-[.78rem] font-bold tracking-[.1em] text-[#0f766e] uppercase">Support engineer</p>
    <p class="mt-2 justify-self-start rounded-full bg-[#ccfbf1] px-2.5 py-1 text-[.75rem] font-bold text-[#115e59]">Support</p>
    <p class="mt-2.5 text-[.9rem] leading-[1.55] text-[#59616e]">Answers the hardest tickets and writes the fix-it guides. Median first reply time on his queue is 14 minutes.</p>
    <div class="col-span-full mt-[18px] flex flex-wrap items-center justify-between gap-3 border-t border-[#e7e3da] pt-4">
      <a class="inline-flex items-center gap-2 rounded text-[.9rem] font-semibold text-[#1f2328] underline decoration-[#e7e3da] decoration-2 underline-offset-4 hover:decoration-[#0f766e] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#0f766e]" href="mailto:[email protected]"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" width="18" height="18"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 6.5l8.5 6.5 8.5-6.5"/></svg>[email protected]</a>
      <ul class="flex gap-2 ">
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3zM9.5 9.75h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.6 4.77 6V21h-4v-5c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.3-1.94 2.66V21h-4z"/></svg><span class="sr-only">Kwame Mensah on LinkedIn</span></a></li>
      <li><a class="grid size-[38px] place-items-center rounded-full bg-[#f3f1ec] text-[#3f4650] transition-[color,background-color,border-color] duration-200 hover:bg-[#0f766e] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#0f766e] motion-reduce:transition-none" href="#"><svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false" width="18" height="18"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg><span class="sr-only">Kwame Mensah on GitHub</span></a></li>
    </ul>
    </div>
  </li>
</ul></div>