.sui-prj-pipeline {
  position: relative;
  display: flex;
  z-index: 10;

  &__items {
    position: relative;
    display: flex;
    align-items: flex-start;
  }

  &__item {
    z-index: 2;
    flex-grow: 0;
    flex-basis: auto;
    padding: 0 $sui-space-lg;
    display: flex;

    &__left {
      z-index: 0;
      position: absolute;
      top: 50%;
      left: rem(-20);
      transform: translateY(-50%);
    }

    &__right {
      position: absolute;
      top: 50%;
      right: rem(-20);
      transform: translateY(-50%);
    }
  }

  &__connectors {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &-line {
      stroke-width: rem(2);
      stroke: $sui-color-brand-denim-400;
      fill: none;
    }
  }
}