/* 아바타 이미지는 배경이 아닌 콘텐츠 이미지로 <img요소> 마크업  */
/* 이미지 성능 최적화 방법에 대해 고민 */
/*  아바타의 상태 정보를 알 수 있도록 정보 제공*/
/* 아바타 이미지 크기 - 64px x 64px */
/* 아바타 간 이미지 간의 간격 - 20px */
/* 회색 원 배경색 - #DBDBDB */
/* 초록 원 색 배경색 = #4CFE88 */
/* float, position을 사용하여 레이아웃 구현 */

/* 이미지 성능 최적화를 위해 확장자 형식 webp 사용 */
/*  */
.user-avatars {
  text-align: center;
}

.user-avatars-item {
  display: inline-block;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.user-avatars-item img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  position: relative;
  z-index: 5;
}

.offline {
  width: 18px;
  height: 18px;
  background-color: #dbdbdb;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  right: 0px;
  z-index: 10;
  border: white, solid;
  display: inline-block;
}

.online {
  width: 18px;
  height: 18px;
  background-color: #4cfe88;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  right: 0px;
  z-index: 10;
  border: white, solid;
}