.avatar-mosaic{aspect-ratio:2/3;border-radius:var(--border-radius-big);width:min(100%,92vw);max-width:460px;box-shadow:var(--box-shadow-medium);grid-template-rows:.85fr .8fr 1.15fr 1.15fr;grid-template-columns:1.05fr .9fr 1.1fr;gap:0;display:grid;overflow:hidden}@media (max-width:767px){.avatar-mosaic{aspect-ratio:1;max-width:560px}}.avatar-tile{cursor:pointer;background:var(--primary-text-color);border:none;padding:0;position:relative;overflow:hidden}.avatar-tile img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.avatar-tile-grey{filter:grayscale()}.avatar-tile-color{clip-path:inset(100% 0 0);transition:clip-path .35s ease-out}.avatar-tile:hover .avatar-tile-color,.avatar-tile:focus-visible .avatar-tile-color,.avatar-tile.selected .avatar-tile-color{clip-path:inset(0)}.avatar-tile:after{content:"";pointer-events:none;z-index:2;box-shadow:inset 0 0 0 0 var(--tile-color,var(--primary-color));transition:box-shadow .2s ease-out;position:absolute;inset:0}.avatar-tile:hover:after,.avatar-tile:focus-visible:after,.avatar-tile.selected:after{box-shadow:inset 0 0 0 3px var(--tile-color,var(--primary-color))}.avatar-tile-name{z-index:1;color:var(--text-color-on-primary);font:var(--font-text2-medium);text-align:left;pointer-events:none;background:linear-gradient(#0000,#000000b3);padding:24px 10px 8px;position:absolute;bottom:0;left:0;right:0}.avatar-tile:hover .avatar-tile-name,.avatar-tile:focus-visible .avatar-tile-name,.avatar-tile.selected .avatar-tile-name{background:linear-gradient(transparent, color-mix(in srgb, var(--tile-color,var(--primary-color)) 80%, black))}.avatar-ripple{background:color-mix(in srgb, var(--tile-color,white) 45%, transparent);pointer-events:none;z-index:3;border-radius:50%;animation:.5s ease-out forwards avatar-ripple;position:absolute;transform:scale(0)}@keyframes avatar-ripple{to{opacity:0;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.avatar-tile-color{transition:none}.avatar-ripple{animation-duration:10ms}}