/* components/steps.css — a real sequence, so it is numbered */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);counter-reset:step}
.steps li{padding:36px 32px 8px 0}
.steps li + li{padding-left:32px;border-left:1px solid var(--rule)}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-family:var(--serif);font-size:2.8rem;font-weight:300;line-height:1;color:var(--accent)}
.steps h3{margin-top:28px;font-size:1.4rem;font-weight:400}
.steps p{margin-top:10px;font-size:.95rem;color:var(--slate)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps li:nth-child(odd){padding-left:0;border-left:0}.steps li{padding-bottom:32px;border-bottom:1px solid var(--rule)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.steps li,.steps li + li{padding-left:0;border-left:0}}