.steps {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: st;

  li { position: relative; padding-top: 58px; }
  li::before {
    counter-increment: st; content: counter(st); position: absolute; top: 0; left: 0;
    width: 42px; height: 42px; border-radius: 50%; background: #fff;
    border: 2px solid var(--blue); color: var(--blue); display: grid; place-items: center;
    font: 700 19px var(--f-display); z-index: 1;
  }
  li::after {
    content: ""; position: absolute; top: 21px; left: 42px; right: -20px;
    height: 2px; background: var(--line);
  }
  li:last-child::after { display: none; }
  b { display: block; font: 700 20px/1.2 var(--f-display); margin-bottom: 6px; }
  p { color: var(--muted); font-size: 16px; }

  @media (max-width: 860px) {
    grid-template-columns: 1fr 1fr; row-gap: 30px;

    li:nth-child(2)::after { display: none; }
  }
  @media (max-width: 480px) {
    grid-template-columns: 1fr;

    li::after { display: none; }
  }
}

.steps + .ctas { margin-top: 32px; }