/* =========================================================
  responsive.css
  - Breakpoints + nav mobile + grids
========================================================= */

@media (max-width: 980px){
  .principles{ grid-template-columns: 1fr; }
  .checklist--cols{ grid-template-columns: 1fr; }
  .final__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-block; }
}

@media (max-width: 520px){
  .card, .callout, .principle, .step{ padding: 16px; }
  .step{ grid-template-columns: 54px 1fr; }
  .step__n{ width:54px; height:54px; border-radius: 16px; }
}
@media (max-width: 768px){
  .lead{
    font-size: 1.05rem;
    letter-spacing: -0.01em;
  }
}