.friendly-avatar {
  --avatar-hue: 215;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  color: #fff;
  background:
    radial-gradient(circle at 28% 18%, #ffffff73, transparent 28%),
    linear-gradient(145deg,
      hsl(var(--avatar-hue) 78% 69%),
      hsl(calc(var(--avatar-hue) + 34) 68% 48%));
}

.friendly-avatar svg {
  width: 76%;
  height: 76%;
  overflow: visible;
}

.friendly-avatar circle,
.friendly-avatar path:not(.avatar-smile) {
  fill: #fff;
  stroke: none;
}

.friendly-avatar .avatar-smile {
  fill: none;
  stroke: hsl(var(--avatar-hue) 55% 43%);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.avatar img,
.header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.offer-photo:has(.friendly-avatar),
.public-profile-photo:has(.friendly-avatar),
.profile-photo-preview:has(.friendly-avatar),
.avatar:has(.friendly-avatar) {
  padding: 0;
}