/* rows sit on the shared head's 7/5 split, so each list starts under the description above it */
.srow{display:grid;gap:32px}
.sec-head>.desc{color:var(--ink)}
.steps p{text-wrap:balance}

.srow .inst{grid-template-rows:auto 1fr auto;align-items:center;gap:28px;padding-bottom:18px}
.tint .srow .inst{background:var(--bg)}
/* width stays 100%: past this height the drawing letterboxes, keeping all four the same size */
.srow .inst svg{max-height:200px}
.srow .inst>:last-child{align-self:stretch;margin-inline:-20px;padding:18px 20px 0;border-top:1px solid var(--line)}
.srow .inst .fact{font-size:20px;font-weight:500;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.srow .inst .fact+.fact{font-size:17px}

.inc{display:grid;grid-template-rows:auto 1fr}
.inc ul{display:grid;border-bottom:1px solid var(--line)}

@media (min-width:701px) and (max-width:860px){
  .inc ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}
@media (min-width:861px){
  .srow{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:stretch}
}