:host(us-steps) {
  display: block;
  color: var(--color-text-900);
  
  p {
    margin: 0;
  }

  .steps {
    padding: 0;
    margin: 0;
  }

  .step {
    position: relative;
    display: flex;

    &:not(:last-child) {
      &:after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: calc(var(--size-4xl) / 2 - 1px);
        display: block;
        width: 1px;
        border-left: 1px dashed var(--color-primary-600);
      }
    }

    &:last-child {
      padding-bottom: 0;
    }

    &__number {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: var(--size-4xl);
      height: var(--size-4xl);
      border: 1px solid var(--color-primary-600);
      border-radius: 50%;
      font: var(--text-headline-h5);
      color: var(--color-primary-600);
      text-transform: uppercase;
      background-color: var(--color-neutral-0);
    }

    &__content {
      margin-left: var(--space-inline-xl);
    }

    &__title {
      font: var(--text-headline-h5);
      margin-bottom: var(--space-inline-s);
    }

    &__text {
      font: var(--text-p-m-light);
    }
  }

  .pd-bottom-big {
    padding-bottom: 24px;
  }

  .pd-bottom-small {
    padding-bottom: var(--space-inline-xl);
  }
}