.employee-grid{display:flex;justify-content:center}.grid-card{display:grid;grid-gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));max-width:100%}.face{height:240px;width:100%;position:relative}.face-top{background-position:-240px 0}.face-top-left{background-position:0 0}.face-top-right{background-position:-480px 0}.face-middle-left{background-position:0 -240px}.face-middle{background-position:-240px -240px;cursor:pointer}.face-middle-right{background-position:-480px -240px}.face-bottom-left{background-position:0 -480px}.face-bottom{background-position:-240px -480px}.face-bottom-right{background-position:-480px -480px}.face-active{background-position:-240px -720px!important}.tooltip{position:absolute;bottom:-60px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;box-shadow:0 4px 6px #0003;visibility:hidden;opacity:0;transition:visibility .2s,opacity .2s,transform .2s;white-space:nowrap;z-index:10}.tooltip__initiator{display:flex;justify-content:center;align-items:center}.tooltip__item{text-align:center}.hover{display:block}@media only screen and (min-width: 768px){.face:hover .tooltip{visibility:visible;opacity:1;transform:translate(-50%) translateY(-10px)}}@media only screen and (max-width: 767px){.grid-card-wrapper{width:100%;overflow:hidden;transition:max-height .45s ease}.employee-grid:after{content:"";position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to bottom,transparent,white);pointer-events:none;z-index:5}.grid-card{width:100%;grid-template-columns:repeat(3,1fr);grid-gap:8px}.face{width:100%;height:auto;aspect-ratio:1/1;background-size:300% 400%}.face-top{background-position:50% 0%}.face-top-left{background-position:0% 0%}.face-top-right{background-position:100% 0%}.face-middle-left{background-position:0% 33.33%}.face-middle{background-position:50% 33.33%}.face-middle-right{background-position:100% 33.33%}.face-bottom-left{background-position:0% 66.67%}.face-bottom{background-position:50% 66.67%}.face-bottom-right{background-position:100% 66.67%}.face-active{background-position:50% 100%!important}.tooltip{bottom:auto;top:80%;transform:translate(-50%) translateY(-50%);width:90%;text-align:center;white-space:normal;word-break:normal;font-size:12px}.face-active .tooltip{visibility:visible;opacity:1;transform:translate(-50%) translateY(-10px)}}@media (prefers-reduced-motion: reduce){.grid-card-wrapper{transition:none}}