/* John Morley Steps: numbered steps in a row under a slate rule */
.jm.steps { --step-pad: 24px; padding: clamp(72px, 8vw, 120px) 0; }
.jm .steps__h { margin-bottom: 40px; }
.jm .how__steps { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 2px solid var(--slate); }
.jm .how__steps li { counter-increment: step; display: grid; align-content: start; gap: 8px; margin: 0; padding: 26px var(--step-pad) 0 0; }
.jm .how__steps li + li { padding-left: var(--step-pad); border-left: 1px solid var(--line); }
.jm .how__steps li::before { content: counter(step); font: 900 64px/1 var(--font-display); color: var(--clay); }
.jm .how__steps b { font: 800 26px/1.05 var(--font-display); text-transform: uppercase; color: var(--slate); }
.jm .how__steps span { color: var(--slate-2); max-width: 32ch; }

@media (max-width: 1024px) {
	.jm .how__steps { grid-template-columns: 1fr 1fr; }
	.jm .how__steps li:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
	.jm .how__steps { grid-template-columns: 1fr; }
	.jm .how__steps li, .jm .how__steps li + li { padding: 22px 0 0; border-left: 0; }
}