Glassmorphism Card

<main class="stage">
  <section class="cards">

    <article class="card c1" tabindex="0">
      <div class="photo"><i class="hair"></i><i class="head"></i><i class="body"></i></div>
      <div class="info">
        <h3>Alex</h3>
        <p>Magician</p>
        <ul>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4"/><path d="M8 10v6M8 7.5v.01M12 16v-6M12 12.5c0-1.7 1-2.5 2.2-2.5s1.8.9 1.8 2.3V16"/></svg></li>
          <li><svg viewBox="0 0 24 24"><path d="M4 20l1.3-4.2A8 8 0 1 1 8.4 18.8z"/><path d="M9.2 8.8c.3 2.4 2.6 4.7 5.4 5.4l1-1.2-1.8-.9-.7.7a4.4 4.4 0 0 1-2-2l.7-.7-.9-1.8z"/></svg></li>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17 7v.01"/></svg></li>
        </ul>
      </div>
    </article>

    <article class="card c2" tabindex="0">
      <div class="photo"><i class="hair"></i><i class="head"></i><i class="body"></i></div>
      <div class="info">
        <h3>Mia</h3>
        <p>Designer</p>
        <ul>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4"/><path d="M8 10v6M8 7.5v.01M12 16v-6M12 12.5c0-1.7 1-2.5 2.2-2.5s1.8.9 1.8 2.3V16"/></svg></li>
          <li><svg viewBox="0 0 24 24"><path d="M4 20l1.3-4.2A8 8 0 1 1 8.4 18.8z"/><path d="M9.2 8.8c.3 2.4 2.6 4.7 5.4 5.4l1-1.2-1.8-.9-.7.7a4.4 4.4 0 0 1-2-2l.7-.7-.9-1.8z"/></svg></li>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17 7v.01"/></svg></li>
        </ul>
      </div>
    </article>

    <article class="card c3" tabindex="0">
      <div class="photo"><i class="hair"></i><i class="head"></i><i class="body"></i></div>
      <div class="info">
        <h3>Sam</h3>
        <p>Developer</p>
        <ul>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4"/><path d="M8 10v6M8 7.5v.01M12 16v-6M12 12.5c0-1.7 1-2.5 2.2-2.5s1.8.9 1.8 2.3V16"/></svg></li>
          <li><svg viewBox="0 0 24 24"><path d="M4 20l1.3-4.2A8 8 0 1 1 8.4 18.8z"/><path d="M9.2 8.8c.3 2.4 2.6 4.7 5.4 5.4l1-1.2-1.8-.9-.7.7a4.4 4.4 0 0 1-2-2l.7-.7-.9-1.8z"/></svg></li>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17 7v.01"/></svg></li>
        </ul>
      </div>
    </article>

    <article class="card c4" tabindex="0">
      <div class="photo"><i class="hair"></i><i class="head"></i><i class="body"></i></div>
      <div class="info">
        <h3>Zoe</h3>
        <p>Photographer</p>
        <ul>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4"/><path d="M8 10v6M8 7.5v.01M12 16v-6M12 12.5c0-1.7 1-2.5 2.2-2.5s1.8.9 1.8 2.3V16"/></svg></li>
          <li><svg viewBox="0 0 24 24"><path d="M4 20l1.3-4.2A8 8 0 1 1 8.4 18.8z"/><path d="M9.2 8.8c.3 2.4 2.6 4.7 5.4 5.4l1-1.2-1.8-.9-.7.7a4.4 4.4 0 0 1-2-2l.7-.7-.9-1.8z"/></svg></li>
          <li><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17 7v.01"/></svg></li>
        </ul>
      </div>
    </article>

  </section>
</main>