.image.avatar.avatar-model {
  width: 220px;
  max-width: 100%;
  height: 220px;
  margin-bottom: 12px;
}

.image.avatar.avatar-model img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}

.avatar-model canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.avatar-model.is-ready canvas { opacity: 1; }
.avatar-model:not(.is-fallback) img { visibility: hidden; }

@media screen and (max-width: 960px) {
  .image.avatar.avatar-model { width: 180px; height: 180px; }
}

@media print {
  .image.avatar.avatar-model img { visibility: visible; }
  .avatar-model canvas { display: none; }
}