/* avatar.css */

.avatar-wrap {
  position: relative;
  width: fit-content;
  flex-wrap: wrap;
  margin: 0 auto;
}

.avatar-link {
  display: block;
  border-radius: 999px;
}

.avatar {
  width: 220px;
  height: 220px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid var(--surface);
  display: block;
}

.avatar-card {
  text-align: center;
  max-width: 240px;
}

.avatar-link:hover .avatar {
  border-color: var(--blue);
}

@media (max-width: 600px) {
  .avatar-wrap {
    gap: 12px;
  }
}