#people-tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.person-card{position:relative;background:#315695;color:#fff;border:3px solid transparent;border-radius:12px;overflow:hidden;min-width:0}
.person-card.selected{border-color:#f5df48}
.person-select{display:flex;flex-direction:column;width:100%;height:100%;min-height:210px;padding:18px 20px 16px;background:transparent;border:0;border-radius:8px;color:inherit;text-align:left;font:inherit;cursor:pointer}
.person-name{display:block;font-size:21px;font-weight:600;line-height:1.4;min-height:36px;margin:0 0 20px;padding-right:44px;overflow-wrap:anywhere}
.person-use{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;width:100%;margin-bottom:28px}
.person-use strong{font-size:22px;color:#fff}
.person-bottom{display:block;width:100%;margin-top:auto}
.person-state{display:block;font-size:14px;margin-bottom:10px;color:#fff}
.person-status-bar{display:block;height:8px;border-radius:8px;background:#a6afb9}
.person-card.normal .person-status-bar{background:#4ade80}
.person-card.danger .person-status-bar{background:#ff6b6b}
.person-private{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #ffffff45;border-radius:10px;background:#ffffff12;color:#fff;cursor:pointer}
.person-private:hover{background:#ffffff28}.person-select:focus-visible,.person-private:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.person-tile.add{min-height:210px;border-radius:12px;background:#f4f7fa;color:#315695}
@media(max-width:480px){#people-tiles{grid-template-columns:1fr}.person-select{min-height:200px}}