.star-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  color: #6c3b3b;
  font-weight: var(--fw-semibold);
  isolation: isolate;
}

.star-avatar[data-avatar-tone="0"] { background: linear-gradient(145deg, #f3d7c5, #dca78f); }
.star-avatar[data-avatar-tone="1"] { background: linear-gradient(145deg, #efd1cb, #ce8f87); }
.star-avatar[data-avatar-tone="2"] { background: linear-gradient(145deg, #ead7c2, #c49d78); }
.star-avatar[data-avatar-tone="3"] { background: linear-gradient(145deg, #efd8d4, #c9959d); }
.star-avatar[data-avatar-tone="4"] { background: linear-gradient(145deg, #e8d4c0, #b98d76); }
.star-avatar[data-avatar-tone="5"] { background: linear-gradient(145deg, #f0d9c9, #ca9b84); }
.star-avatar[data-avatar-tone="6"] { background: linear-gradient(145deg, #ead9cf, #b9958d); }
.star-avatar[data-avatar-tone="7"] { background: linear-gradient(145deg, #f1dacf, #d0a28f); }

.star-avatar-fallback {
  position: relative;
  z-index: 0;
  display: block;
  line-height: var(--lh-heading);
}

.star-avatar > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}