.steps {
  --steps-indicator-size: 3rem;
  --steps-indicator-last-size: 5rem;
  --steps-indicator-ratio: 1.75;
  --steps-line: 3px dashed hsla(var(--color-main-h), var(--color-main-s), var(--color-main-l), 0.2);
  --steps-indicator-background: transparent;
  --space-regular: 1rem;
}
.steps ._step {
  position: relative;
}
.steps ._step:has(._step-figure):has(._step-text):has(._step-indicator.dot) ._step-figure, .steps ._step:has(._step-figure):has(._step-text):has(._step-indicator.dot) ._step-text {
  flex: 1 1 auto;
  max-width: none;
  width: 50%;
}
.steps ._step:has(._step-figure):has(._step-text):has(._step-indicator.dot) ._step-indicator {
  flex: 0 1 auto;
}
.steps ._step:not(:last-of-type) {
  padding-bottom: calc(var(--steps-indicator-size) / 2);
}
@media (min-width: 640px) {
  .steps ._step:not(:last-of-type) {
    padding-bottom: var(--steps-indicator-size);
  }
}
.steps ._step.-last-vertical ._step-indicator {
  font-size: var(--steps-indicator-last-size);
}
@media (min-width: 640px) {
  .steps ._step {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .steps ._step ._step-indicator {
    order: 2;
  }
  .steps ._step ._step-text {
    order: 3;
    text-align: left;
  }
  .steps ._step ._step-figure {
    order: 1;
    align-self: center;
    margin-left: auto;
    margin-right: 0;
  }
  .steps ._step ._step-figure .image-content img {
    margin-right: var(--space-regular);
  }
  .steps ._step:nth-of-type(2n):not(.-last-vertical) ._step-text {
    order: 1;
    text-align: right;
  }
  .steps ._step:nth-of-type(2n):not(.-last-vertical) ._step-figure {
    order: 3;
    margin-left: 0;
    margin-right: auto;
  }
  .steps ._step:nth-of-type(2n):not(.-last-vertical) ._step-figure .image-content img {
    margin-left: var(--space-regular);
    margin-right: auto;
  }
  .steps ._step.-last-vertical {
    flex-direction: column;
    align-items: center;
  }
  .steps ._step.-last-vertical ._step-text {
    text-align: center;
  }
  .steps ._step.-last-vertical ._step-indicator {
    align-self: center;
  }
}
.steps ._step-text {
  text-align: center;
}
@media (min-width: 640px) {
  .steps ._step-text {
    width: calc(50% - var(--steps-indicator-size) * var(--steps-indicator-ratio) / 2 - var(--space-regular) * 2);
  }
}
@media (max-width: 1023px) {
  .steps ._step-text .base-padding {
    --padding-space: 1rem 0.5rem;
  }
}
.steps ._step-figure {
  width: 240px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-regular);
  text-align: center;
}
@media (min-width: 640px) {
  .steps ._step-figure.-grow {
    width: 100%;
    flex-grow: 1;
    max-width: calc(50% - var(--steps-indicator-size) * var(--steps-indicator-ratio) / 2 - var(--space-regular) * 2);
  }
  .steps ._step-figure.-grow .image-content {
    width: 100%;
  }
  .steps ._step-figure.-grow .image-content img {
    width: 100%;
    height: auto;
  }
}
.steps ._step-figure .image-content > a, .steps ._step-figure .image-content picture {
  display: block;
  max-width: 100%;
}
.steps ._step-figure .image-content img {
  display: block;
  max-width: 100%;
  height: auto;
}
.steps ._step-indicator {
  box-sizing: border-box;
  font-size: var(--steps-indicator-size);
  width: calc(var(--steps-indicator-ratio) * 1em);
  aspect-ratio: 1;
  font-weight: bold;
  margin-inline: auto;
  border-radius: 100%;
  border: var(--steps-indicator-border);
  background: var(--steps-indicator-background);
  line-height: var(--steps-indicator-ratio);
  text-align: center;
  flex-grow: 0;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .steps ._step-indicator {
    margin-inline: calc(var(--space-regular) * 2);
  }
}
@media (max-width: 1023px) {
  .steps ._step-indicator {
    margin-bottom: var(--space-regular);
  }
}
.steps ._step-indicator.dot {
  width: 1em;
  aspect-ratio: 1;
  background-color: currentColor;
}
@media (min-width: 640px) {
  .steps ._step-indicator.dot {
    margin-inline: calc(var(--space-regular) * 3);
  }
}
.steps ._icon-content {
  margin: 0.5rem;
  max-width: 100%;
  box-sizing: content-box;
  aspect-ratio: 1;
  background: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.steps ._icon-content figure {
  padding: 0 !important;
}
.steps ._icon-content .svg-autoscale .svg {
  position: relative;
  left: 0;
  max-width: 6rem;
}
.steps .image-content {
  display: block;
  border-radius: 100%;
}
.steps .image-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.steps.-show-line ._step {
  padding-bottom: 0;
}
.steps.-show-line ._step:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  margin-left: -1px;
  border-right: var(--steps-line);
  top: calc(var(--steps-indicator-size) * var(--steps-indicator-ratio));
  bottom: 100px;
}
.steps.-show-line ._steps-wrap.dot ._step:before {
  top: 0;
  bottom: 0;
}
.steps.-show-line ._steps-wrap.dot ._step:last-child {
  padding-bottom: 2rem;
}
.steps.-show-line ._steps-wrap.dot ._step:last-child:before {
  bottom: 2rem;
}

._step-text :is(h2, h3, h4) a {
  color: var(--color-main);
}
/*# sourceMappingURL=steps.css.map */