:root,:host{--breakpoint-s:30rem;--breakpoint-m:48rem;--breakpoint-l:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:120rem}.avatar{--_width:80px;width:var(--_width);display:inline-block;position:relative;-webkit-mask-image:url("data:image/svg+xml,%3Csvg  viewBox='0 0 200 246' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M200 0H0V146C0 201.228 44.7715 246 100 246C155.228 246 200 201.228 200 146V0Z' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg  viewBox='0 0 200 246' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M200 0H0V146C0 201.228 44.7715 246 100 246C155.228 246 200 201.228 200 146V0Z' fill='%23000'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.avatar:before{content:"";aspect-ratio:1;width:calc(var(--_width)*.81);border-radius:100%;animation:30s linear infinite alternate colorfade;display:block;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.avatar img{width:100%;height:auto;transition:transform .3s var(--ease-out);transform:translateY(.8rem)}.avatar-flag{font-family:var(--font-family);font-weight:var(--font-weight-bold);font-size:var(--font-size-7);white-space:nowrap;background-color:var(--color-red);color:var(--color-white);padding:var(--space-2xs);border-radius:var(--border-radius);opacity:0;visibility:hidden;transition:all .3s var(--ease-jump);pointer-events:none;position:absolute;top:0;right:0;translate:-40% -1rem;rotate:8deg}@media (max-width:48rem){.avatar-flag{translate:-10% -1rem;rotate:4deg}}.avatar-wrap{position:relative}:is(.avatar-wrap:has(.avatar:hover),html:not(.no-js) .avatar-wrap:has(.avatar.avatar--open)) .avatar-flag{opacity:1;visibility:visible;translate:-40% 25%}@media (max-width:48rem){:is(.avatar-wrap:has(.avatar:hover),html:not(.no-js) .avatar-wrap:has(.avatar.avatar--open)) .avatar-flag{translate:-10% 25%}}.avatar:hover img,html:not(.no-js) .avatar.avatar--open img{transform:translateY(.1em)scale(1.1)}@keyframes colorfade{0%{background-color:var(--color-light-gray)}to{background-color:var(--color-jet)}}
