/* Student ID page: the card, and beside it the same record written out in full. */
.student-card-layout{align-items:stretch}
.student-card-layout>.s7{display:grid}
.student-card-layout .id-card{max-width:none;aspect-ratio:auto;min-height:320px;gap:24px;padding:28px 30px 26px;box-shadow:0 16px 38px rgba(17,30,63,.12)}
.student-card-layout .id-card .avatar.large{width:96px;height:120px}
.student-card-layout .id-card-person{gap:22px}
.student-card-layout .id-card-person h2{font-size:30px}
.student-card-layout .id-card-facts{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:12px 36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.student-card-layout .id-card-facts dd{white-space:normal}
.id-card-number strong{display:block;font:600 24px/1.2 var(--text);letter-spacing:.05em;font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
.id-facts>div{grid-template-columns:112px minmax(0,1fr)}
.facts dd small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--slate)}
@media(max-width:700px){
  .student-card-layout .id-card{min-height:0;padding:22px 22px 20px;gap:22px}
  .student-card-layout .id-card-person{gap:16px}
  .student-card-layout .id-card-person h2{font-size:25px}
  .student-card-layout .id-card .avatar.large{width:72px;height:90px}
  .student-card-layout .id-card-facts{grid-template-columns:1fr 1fr;gap:14px 20px}
  .student-card-layout .id-card-number{grid-column:1/-1}
  .id-card-number strong{font-size:22px}
  .id-facts>div{grid-template-columns:1fr}
}