/* Numbered steps, on the home page and How it works. */

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); gap: var(--space-4); counter-reset: step; }
.steps > li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding: var(--space-5); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.steps > li::before { content: counter(step); display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--blue); color: var(--on-blue); font-weight: 700; }
.steps p { color: var(--ink-2); margin: 0; }