/* Steps: a numbered sequence (an <ol>). Only use it for content that really is a sequence. */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); margin: 34px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps__item { counter-increment: step; }
.steps__item::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; }
.steps__title { margin: 0 0 6px; font: 700 1.25rem var(--font); }
.steps__text { max-width: 34ch; margin: 0; color: var(--muted); }

@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }