.avatar{aspect-ratio:1/1;position:relative;transition:all .2s ease;width:clamp(auto,100%,300px)}.avatar__image{aspect-ratio:1;height:100%;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='212' height='193' fill='none' viewBox='0 0 212 193'%3E%3Cmask id='a' width='205' height='191' x='7' y='2' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23d9d9d9' d='M204.566 72.5a50 50 0 0 1 0 50l-25.882 44.83a50 50 0 0 1-43.302 25H83.618a50 50 0 0 1-43.302-25L14.434 122.5a50 50 0 0 1 0-50l25.882-44.83a50 50 0 0 1 43.302-25h51.764a50 50 0 0 1 43.302 25z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23000' d='M-28-11h261v225H-28z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='212' height='193' fill='none' viewBox='0 0 212 193'%3E%3Cmask id='a' width='205' height='191' x='7' y='2' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23d9d9d9' d='M204.566 72.5a50 50 0 0 1 0 50l-25.882 44.83a50 50 0 0 1-43.302 25H83.618a50 50 0 0 1-43.302-25L14.434 122.5a50 50 0 0 1 0-50l25.882-44.83a50 50 0 0 1 43.302-25h51.764a50 50 0 0 1 43.302 25z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23000' d='M-28-11h261v225H-28z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;max-width:200px;min-width:35px;-o-object-fit:cover;object-fit:cover;width:100%}.avatar__image.no-mask{-webkit-mask-image:none;mask-image:none}.avatar__edit{--bg-color:#fff;--fill-color:var(--bg-color);--padding:25px;background-color:var(--bg-color);border-radius:50%;cursor:pointer;left:50%;padding:var(--padding);position:absolute;top:50%;transform:translate(-50%,-50%);transition:background-color .15s ease}.avatar__edit:hover{--bg-color:#e1e0e0}.avatar--drag-over{opacity:.5;transform:scale(1.1)}@media(max-width:1024px){.avatar__image{max-height:150px;max-width:150px}}