.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: var(--Corner-Radius-Rounded);
  background-color: var(--Overlay-40);
}

.avatar:has(.initials) {
  background-color: var(--Icon-Accent);
}

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

.size-sm {
  width: 24px;
  height: 24px;
}

.size-md {
  width: 32px;
  height: 32px;
}

.size-lg {
  width: 55px;
  height: 55px;
}

.initials {
  color: white;
  text-transform: uppercase;
}