.steps {
  --num-width: 40px;
  --point-color: var(--color-accent-primary-hover);
  --column-gap: 70px;
  display: grid;
  row-gap: var(--row-gap);
}
@media (min-width: 740px) {
  .steps {
    --point-size: 20px;
    --point-border: 4px;
    --top-space: 19px;
    --row-gap: 24px;
  }
}
@media (max-width: 739.98px) {
  .steps {
    --point-size: 16px;
    --point-border: 3px;
    --top-space: 13px;
    --row-gap: 12px;
  }
}
.steps_item {
  position: relative;
  display: grid;
}
@media (min-width: 740px) {
  .steps_item {
    grid-template-columns: var(--num-width) 1fr;
    column-gap: var(--column-gap);
    align-items: start;
  }
}
@media (max-width: 739.98px) {
  .steps_item {
    padding-inline-start: 16px;
  }
}
.steps_item:not(:last-child)::after {
  content: "";
}
.steps_item::before, .steps_item::after {
  position: absolute;
}
.steps_item::before {
  top: var(--top-space);
  width: var(--point-size);
  height: var(--point-size);
  content: "";
  background-color: var(--point-color);
  border: var(--point-border) solid var(--color-border-dark);
  border-radius: 50%;
}
@media (min-width: 740px) {
  .steps_item::before {
    inset-inline-start: var(--num-width);
  }
}
@media (max-width: 739.98px) {
  .steps_item::before {
    inset-inline-start: 0;
  }
}
.steps_item::after {
  top: calc(var(--top-space) + var(--point-size));
  width: 2px;
  height: calc(100% + var(--row-gap) - var(--point-size));
  background-image: linear-gradient(to bottom, transparent 0 5px, var(--point-color) 5px 15px, transparent 15px 20px);
  background-repeat: space;
  background-position: center;
  background-size: 100% 20px;
}
@media (min-width: 740px) {
  .steps_item::after {
    inset-inline-start: calc(var(--num-width) + var(--point-size) / 2 - 1px);
  }
}
@media (max-width: 739.98px) {
  .steps_item::after {
    inset-inline-start: calc(var(--point-size) / 2 - 1px);
  }
}
.steps_num {
  display: grid;
  place-content: center start;
  padding-inline: 8px;
  line-height: 1.4;
  color: var(--point-color);
}
@media (min-width: 740px) {
  .steps_num {
    padding-block: 16px;
  }
}
@media (max-width: 739.98px) {
  .steps_num {
    padding-block: 8px;
  }
}
.steps_content {
  position: relative;
  display: grid;
  row-gap: 8px;
  background-color: var(--color-bg-card);
  border-radius: 8px;
}
@media (min-width: 740px) {
  .steps_content {
    padding: 16px 24px;
  }
}
@media (max-width: 739.98px) {
  .steps_content {
    padding: 12px;
  }
}
@media (min-width: 740px) {
  .steps_content::before, .steps_content::after {
    position: absolute;
    z-index: 2;
    content: "";
    opacity: 0.4;
  }
}
.steps_content::before {
  inset-inline-start: calc(-1 * var(--point-size) / 2);
  top: var(--top-space);
  width: var(--point-size);
  height: var(--point-size);
  background-color: var(--point-color);
  border: var(--point-border) solid var(--color-border-dark);
  border-radius: 50%;
}
.steps_content::after {
  inset-inline-end: calc(100% + var(--point-size) / 2);
  top: calc(var(--top-space) + var(--point-size) / 2 - 1px);
  width: calc(var(--column-gap) - var(--point-size) * 1.5);
  height: 2px;
  background-image: linear-gradient(to left, transparent 0 5px, var(--point-color) 5px 15px, transparent 15px 20px);
  background-repeat: space;
  background-position: center;
  background-size: 20px 100%;
}