tornado-initiation-ui/assets/styles/components/_step.scss

.steps {
  padding-top: 1.25rem;
}

.step {
  margin: 1.25rem 0;
  background: #1F1F1F;
  border-radius: 6px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  overflow: hidden;

  @include mobile {
    flex-wrap: wrap;
  }

  &:first-child {
    margin-top: 0;
  }


  .diamond {
    margin-right: 1.25rem;

    @include mobile {
      align-self: flex-start;
    }
  }

  &-body {
    flex-grow: 1;

    @include mobile {
      width: calc(100% - 60px - 1.25rem);
    }

    h4 {
      font-weight: 700;
      @include until(576px) {
        font-size: 0.9rem;
      }
    }

    .deployed {
      font-size: 0.813rem;
      color: #6B6B6B;
      margin-top: .25rem;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  &-tail {
    background-color: #191919;
    align-self: stretch;
    margin: -1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem;
    width: 148px;

    @include mobile {
      margin-top: 1.25rem;
      flex-basis: 100%;
      flex-grow: 1;
    }

    .completed {
      display: flex;
      align-items: center;
      font-size: $size-normal;
      color: $primary;
      font-weight: 700;

      .icon {
        margin-right: 0.5em;
      }
    }
  }
}