/* Client-only People primitives. Administrative People screens use people.css. */
.hpm-person-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  background: #dbe5e9;
  color: #294653;
  font-size: 22px;
  font-weight: 800;
}

.hpm-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hpm-person-avatar.is-fallback {
  background: linear-gradient(135deg, var(--hpm-brand-secondary, #173d4f), var(--hpm-brand-primary, #0c2231));
  color: #fff;
}