.steps__container {
  display: flex;
  flex-direction: column;
}

.steps__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  counter-reset: step-counter;
}

.steps__item {
  display: flex;
  gap: var(--space-8);
  counter-increment: step-counter;
}
@media (min-width: 768px) {
  .steps__item {
    gap: var(--space-24);
  }
}

.step__number {
  min-height: var(--space-24);
  display: flex;
  justify-content: center;
  font-weight: var(--fw-bold);
  position: relative;
  align-self: stretch;
}
.step__number::before {
  font-family: var(--ff-microtext);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-regular);
  font-weight: var(--fw-bold);
  content: counter(step-counter);
  width: var(--space-24);
  height: var(--space-24);
  border: 2px solid var(--color-accent-disabled-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}
@media (min-width: 768px) {
  .step__number::before {
    font-family: var(--ff-headline);
    font-size: 32px;
    line-height: 38px;
    font-weight: var(--fw-bold);
    content: counter(step-counter, decimal-leading-zero);
    border: none;
  }
}

.step__number::after {
  content: "";
  position: absolute;
  top: var(--space-40);
  width: var(--space-2);
  height: calc(100% - var(--space-40));
  background-color: var(--color-accent-disabled-text);
}

.steps__list > .steps__item:last-child .step__number::after {
  display: none;
}

.step__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .step__content {
    gap: var(--space-12);
  }
}
.step__content :where(h1, h2, h3, p, caption, ul, ol, li):not(.text, .text *) {
  margin-block-end: 0 !important;
}

.step__title {
  font-family: var(--ff-headline);
  font-size: 20px;
  line-height: 24px;
  font-weight: var(--fw-regular);
}
@media (min-width: 768px) {
  .step__title {
    font-size: 24px;
    line-height: 32px;
  }
}
.step__title {
  font-weight: var(--fw-bold);
  padding-top: var(--space-6);
}
@media (min-width: 768px) {
  .step__title {
    padding-top: 0;
  }
}

.step__description p {
  font-family: var(--ff-microtext);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-regular);
}

.step__button {
  align-self: flex-start;
  padding-block-end: var(--space-8);
}
.step__button .button__text {
  font-family: var(--ff-microtext);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-bold);
}