/* Wherever a spinning bolt head sits, its title sits on the same line to the right of it; the description
   runs full width underneath. Live pages only (the samples keep their own layouts). */

/* home: What we do cards */
.card{display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; align-content:start;}
.card > .bolt-icon{margin:-12px 0 -12px -10px;}
.card > h3{margin:0;}
.card > p{grid-column:1 / -1; margin-top:16px;}

/* home: How it works steps */
.step{display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; align-content:start;}
.step > .num.step-bolt{margin:0;}
.step .num.step-bolt .bolt-icon{margin:-8px 0 -8px -6px;}
.step > h4{margin:0;}
.step > p{grid-column:1 / -1; margin-top:14px;}
.step:not(:last-child)::after{top:24px;}

/* solutions: head | title | tag on one line, the rest of the row underneath the title */
.sol-row{grid-template-columns:68px 1fr auto; grid-template-areas:none; column-gap:22px; row-gap:0; align-items:center;}
.sol-row > .sol-main{display:contents;}
.sol-row > .bolt-icon{grid-column:1; grid-row:1;}
.sol-row > .sol-main > h3{grid-column:2; grid-row:1; margin:0;}
.sol-row > .tag{grid-column:3; grid-row:1; justify-self:end;}
.sol-row > .sol-main > :not(h3){grid-column:2 / -1; margin-top:8px;}
.sol-row.mri{grid-template-columns:68px 1fr auto; grid-template-areas:none;}
.sol-row.mri > .bolt-icon{grid-area:auto; grid-column:1; grid-row:1;}
.sol-row.mri > .tag{grid-area:auto; grid-column:3; grid-row:1;}
.sol-row.mri > .sol-main > :not(h3){grid-column:1 / -1;}       /* the wide readout gets the full row */
.sol-row.mri > .sol-main > p:first-of-type{margin-top:14px;}

@container (max-width: 640px){
  .sol-row, .sol-row.mri{grid-template-columns:auto 1fr; column-gap:14px;}
  .sol-row > .sol-main > :not(h3){grid-column:1 / -1;}
  .sol-row > .tag, .sol-row.mri > .tag{grid-column:1 / -1; grid-row:auto; justify-self:start; margin-top:12px;}
}
@container (max-width: 360px){
  .card > .bolt-icon{--s:60px; margin:-10px 0 -10px -8px;}
  .sol-row .bolt-icon{--s:60px;}
  .step .num.step-bolt .bolt-icon{--s:56px;}
}