.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: step;
}

.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.steps__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.steps__item::before {
  counter-increment: step;
  content: counter(step);
  grid-row: span 2;
  min-inline-size: 2.25rem;
  color: var(--color-gold-600);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.steps__title {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.steps__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .steps__item {
    padding-block: 0;
    border-block-start: 0;
  }

  .steps__item + .steps__item {
    padding-inline-start: var(--space-8);
    border-inline-start: 1px solid var(--color-border);
  }
}