/* Scope each quality mark to its assessed resource within the school hero. */
.hero .hero-art {display:grid;justify-items:center;align-content:center;gap:24px;min-height:0}
.hero .hero-art .cover {position:relative;inset:auto;width:min(78%,330px);margin:8px auto 0}
.hero .hero-art .ava {top:235px;bottom:auto;left:-4px;width:30%;z-index:1}
.hero-quality-marks {display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;position:relative;z-index:2}
.hero-qm-card {display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;text-align:center}
.hero-qm-card > img {height:62px;width:auto;max-width:100%;object-fit:contain}
.hero-qm-caption {display:block;max-width:23ch}
.hero-qm-caption > strong {display:block;font-size:14px;font-weight:700;line-height:1.4;margin-bottom:6px}
.hero-qm-caption > span {display:block;font-size:12px;line-height:1.5;color:var(--deep)}
.hero-qm-card:hover {border-color:var(--bright);background:var(--pale)}
.hero-qm-card:focus-visible {outline:3px solid var(--yellow);outline-offset:4px}
@media (max-width:900px) {
  .hero .hero-art {margin-top:8px}
}
@media (max-width:560px) {
  .hero .hero-art .cover {width:74%}
  .hero .hero-art .ava {top:clamp(130px,44vw,220px);width:34%;left:0}
  .hero-quality-marks {gap:10px}
  .hero-qm-card {padding:16px 10px;gap:12px}
  .hero-qm-caption > strong {font-size:14px}
  .hero-qm-caption > span {font-size:13px}
}
@media (max-width:360px) {
  .hero-quality-marks {grid-template-columns:1fr}
  .hero-qm-card {flex-direction:row;text-align:left;gap:14px;padding:16px}
  .hero-qm-card > img {flex:0 0 66px;width:66px;height:auto;max-height:68px}
  .hero-qm-caption {flex:1;min-width:0}
}