/**
 * @todo BEM
 */
.steps {
  --steps-indicator-size: var(--space-huge);
  --steps-indicator-ratio: 1.75;
  --steps-indicator-last-size: calc(var(--steps-indicator-size) * 2);
  --steps-margin: calc(var(--steps-indicator-size) / 2);
  --steps-figure-width: 240px;
  --steps-indicator-border: 1px solid currentColor;
  --steps-indicator-background: transparent;
  --steps-indicator-font-weight: bold;
  --steps-indicator-icon-content-margin: 0.33em;
  --steps-indicator-bullet-icon-size: 4.5rem;
  --steps-indicator-bullet-icon-border-correct: -1px;
  --steps-line: 3px dashed hsla(var(--color-text-h), var(--color-text-s), var(--color-text-l), 0.2);
}
.steps ._step {
  position: relative;
  column-gap: var(--space-regular);
}
.steps ._step:not(:last-of-type) {
  padding-bottom: var(--steps-margin);
}
.steps ._step.-last-vertical ._step-indicator {
  font-size: var(--steps-indicator-last-size);
  margin-bottom: var(--steps-margin);
}
@media (min-width: 640px) {
  .steps ._step {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .steps ._step ._step-indicator {
    order: 2;
    align-self: flex-start;
    margin: auto calc(var(--steps-margin) * 0.5);
  }
  .steps ._step ._step-text {
    order: 3;
    text-align: left;
    margin: auto;
  }
  .steps ._step ._step-figure {
    order: 1;
    align-self: center;
    margin: auto;
  }
  .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;
  }
  .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(--indicator-ratio) / 2 - var(--steps-margin) * 2);
  }
}
.steps ._step-figure {
  width: var(--steps-figure-width);
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--steps-margin);
  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(--steps-margin) * 2);
  }
  .steps ._step-figure.-grow .image-content {
    width: 100%;
  }
  .steps ._step-figure.-grow .image-content img {
    width: 100%;
    height: auto;
  }
}
.steps ._step-figure figure.svg-autoscale {
  padding-bottom: 100% !important;
}
.steps ._step-figure ._icon-content {
  width: calc(var(--steps-figure-width) * 0.35);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .steps ._step-figure ._icon-content {
    width: calc(var(--steps-figure-width) * 0.5);
  }
}
@media (min-width: 1024px) {
  .steps ._step-figure ._icon-content {
    width: calc(var(--steps-figure-width) * 0.75);
  }
}
@media (max-width: 479px) {
  .steps ._step-figure base-bullet-wrap.huge {
    --bullet-wrap-size-base: calc(1em*var(--steps-indicator-ratio));
  }
}
.steps ._step-indicator {
  box-sizing: border-box;
  font-size: var(--steps-indicator-size);
  width: calc(1em * var(--steps-indicator-ratio));
  height: calc(1em * var(--steps-indicator-ratio));
  margin-left: auto;
  margin-right: auto;
  border-radius: 100%;
  border: var(--steps-indicator-border);
  background: var(--steps-indicator-background);
  line-height: var(--steps-indicator-ratio);
  text-align: center;
  font-weight: var(--steps-indicator-font-weight);
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  margin-bottom: var(--steps-margin);
}
.steps ._step-indicator > * {
  flex-basis: 100%;
}
.steps ._step-indicator ._icon-content {
  margin: var(--steps-indicator-icon-content-margin);
}
.steps ._step-indicator base-bullet-wrap {
  position: relative;
  top: var(--steps-indicator-bullet-icon-border-correct);
  left: var(--steps-indicator-bullet-icon-border-correct);
  right: var(--steps-indicator-bullet-icon-border-correct);
  bottom: var(--steps-indicator-bullet-icon-border-correct);
}
.steps .image-content {
  display: block;
  border-radius: 100%;
  overflow: hidden;
}
.steps .image-content img {
  display: block;
}
@media (min-width: 640px) {
  .steps.-show-line ._step:not(:last-of-type):before {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -1px;
    border-right: var(--steps-line);
    bottom: var(--space-tiny);
    height: var(--steps-margin);
  }
}

@media (min-width: 640px) {
  .steps.steps--animate ._step > * {
    transition: transform 0.66s ease 0.25s, opacity 1s ease 0.5s;
    transform: translateX(var(--step-translate-x)) translateY(var(--step-translate-y));
    opacity: 1;
  }
  .steps.steps--animate ._step.out-of-view > * {
    opacity: 0;
  }
  .steps.steps--animate ._step:not(.-last-vertical).out-of-view > * {
    --step-translate-x: -50dvw;
    --step-translate-y: 0%;
  }
  .steps.steps--animate ._step:not(.-last-vertical):nth-child(2n).out-of-view > * {
    --step-translate-x: 50dvw;
  }
  .steps.steps--animate ._step.-last-vertical.out-of-view > * {
    --step-translate-x: 0;
    --step-translate-y: 50%;
  }
}
/*# sourceMappingURL=steps.css.map */