.hero .name{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:17px;color:rgba(255,255,255,.85);margin-bottom:18px}
.hero .facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero .facts span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);font-size:15px;color:#fff}

/* all graduates in one grid */
.grads{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 18px;margin:40px 0 48px}
.grad{display:flex;flex-direction:column;gap:6px}
.grad img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 20%;border-radius:50%;background:var(--tint)}
.grad strong{font-weight:500;font-size:15px;line-height:1.3;margin-top:4px}
.grad .role{font-size:14px;line-height:1.35;color:var(--muted)}
.grad a{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--petrol);text-decoration:none}
.grad a svg{width:15px;height:15px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tag{font:500 12px/1 var(--ff);color:var(--petrol);background:var(--tint);padding:6px 9px;border-radius:999px}
.running{margin:8px 0 0;padding:24px 26px;border-radius:20px;background:var(--tint);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.running p{font-size:17px}
@media (max-width:1000px){.grads{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.grads{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}

.joinband{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.joinband .acts{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}
@media (max-width:900px){.joinband{grid-template-columns:1fr}}