/* A numbered sequence: how something works. */
.steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: steps;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.steps__item {
    display: flex;
    gap: var(--spacing-md);
    counter-increment: steps;
}

.steps__item::before {
    content: counter(steps);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}