.dcl.avatar-face {
  border-radius: 100%;
  background-color: rgba(var(--bluish-steel-raw), 0.4);
  width: 42px;
  height: 42px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.dcl.avatar-face.responsive {
  width: 93px;
  height: 93px;
}

@media (min-width: 1200px) {
  .dcl.avatar-face.responsive {
    width: 170px;
    height: 170px;
  }
}

.dcl.avatar-face.large {
  width: 108px;
  height: 108px;
}

.dcl.avatar-face.medium {
  width: 48px;
  height: 48px;
}

.dcl.avatar-face.small {
  width: 32px;
  height: 32px;
}

.dcl.avatar-face.tiny {
  width: 20px;
  height: 20px;
}

.dcl.avatar-face.inline {
  vertical-align: -25%;
}

.dcl.avatar-face img {
  width: 100%;
}

.dcl.avatar-face .guest-face {
  width: 100%;
  height: 100%;
  background: url(../../assets/guest.svg);
  background-position: center;
  background-size: contain;
}