*{box-sizing:border-box}body{margin:0;background:#f7f8fb;color:#24262b;font-family:Inter,system-ui,sans-serif}
.wrap{max-width:1000px;margin:0 auto;padding:24px}
.hero{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.avatar{width:84px;height:84px;border-radius:50%}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.side{background:#fff;border:1px solid #e8ebf0;border-radius:12px;padding:12px}
section{background:#fff;border:1px solid #e8ebf0;border-radius:12px;padding:16px}
h1{margin:0} .sub{color:#6b7280}
.friends{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.friends li{display:flex;align-items:center;gap:8px}
.gridp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gridp img{width:100%;height:160px;object-fit:cover;border-radius:8px}
@media(max-width:900px){.grid{grid-template-columns:1fr}.gridp{grid-template-columns:repeat(2,1fr)}}