.avatar{text-align:center;width:100%;font-size:14px;line-height:18px;font-weight:700;--avatar-size:100%}.avatar.small,.avatar.xsmall{font-size:10px;line-height:12px}.avatar.small .bubble-content,.avatar.small .bubble-overlay,.avatar.xsmall .bubble-content,.avatar.xsmall .bubble-overlay{display:none}.avatar .bubble,.avatar .bubble-content{width:var(--avatar-size);height:var(--avatar-size);border-radius:calc(var(--avatar-size)/2);justify-items:center;align-items:center;justify-content:center}.avatar .bubble{background-color:var(--color-light-porcelain);color:var(--color-pink);display:grid;font-size:80px;font-weight:900;overflow:hidden;aspect-ratio:1/1}.avatar .bubble>*{grid-column-start:1;grid-row-start:1}.avatar .bubble .bubble-overlay{width:var(--avatar-size);height:var(--avatar-size);border-radius:calc(var(--avatar-size)/2);background-color:#eb738eb3;opacity:0;aspect-ratio:1/1}.avatar .bubble .bubble-content{width:calc(var(--avatar-size) - 16px);height:calc(var(--avatar-size) - 16px);border-radius:calc(var(--avatar-size)/2);background-color:var(--color-pink);transform:scale(0)}@media(hover:hover){.avatar:hover{transform:scale(1.2)}.avatar:hover .bubble-overlay{opacity:.7}.avatar:hover .bubble-content{transform:scale(1)}.avatar .follow:hover{background-color:var(--color-pink);border:1px solid var(--color-white)}}.avatar .follow{padding:10px 30px;border-radius:100px;background-color:var(--color-gray);color:var(--color-white);border:1px solid var(--color-black);display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:4px;font-size:10px}.avatar .follow .vb-icon{width:16px;height:16px;filter:invert()}.avatar .bubble .bubble-content span{font:var(--text-body-small);color:var(--color-white);text-transform:none;width:-moz-min-content;width:min-content;font-weight:600}.avatar .profile{font:var(--text-body-small)}.avatar img{width:var(--avatar-size);height:var(--avatar-size);-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;aspect-ratio:1/1}.avatar .bubble span{text-transform:uppercase;width:var(--avatar-size)}.avatar-label{word-break:break-word}.avatar-label.small{font:var(--text-body-medium)}@media screen and (max-width:1080px){.avatar .bubble{font-size:40px}.avatar-label{font:var(--text-body-medium);font-weight:700}.avatar .bubble-content{display:none}}
