.journey-block {
  position: relative;
  margin: 75px 0 60px;
  padding: 0 10px;
  color: $primary-color;

  @include md {
    margin: 55px 0;
    padding: 0 $gutter-mobile;
  }

  &__wrapper {
    max-width: $max-width;
    margin: 0 auto;
    padding: 0 $half-gutter;

    @include md {
      padding: 0;
    }
  }

  &__items {
    display: flex;

    @include md {
      flex-direction: column;
    }

    &--mobile {
      @include md {
        display: none;
      }
    }
  }

  &__item {
    position: relative;
    width: 100%;
    padding: 0 $half-gutter;

    @include md {
      display: flex;
      padding: 0;
    }

    &.journey-block__item--vivid-blue {
      path {
        fill: $blue;
      }
    }

    &.journey-block__item--primary {
      path {
        fill: $primary-color;
      }

      .journey-block__step span {
        background-color: $primary-color;
      }
    }

    &.journey-block__item--orange {
      path {
        fill: $topic-orange;
      }

      .journey-block__step span {
        background-color: $topic-orange;
      }
    }

    &.journey-block__item--yellow {
      path {
        fill: $yellow;
      }
    }

    &.journey-block__item--green {
      path {
        fill: $topic-green;
      }
    }

    &:first-child {
      .journey-block__step::before {
        display: block;
      }
    }

    &:last-child {
      .journey-block__step::after {
        display: none;
      }

      .journey-block__step--mobile {
        &::before {
          display: none;
        }
      }

      &.journey-block__item--icon {
        .journey-block__step--mobile {
          &::before {
            display: block;
            height: 80px;
            top: -80px;
          }
        }
      }
    }
  }

  &__step {
     &::after, &::before {
      content: '';
      position: absolute;
      top: 19px;
      left: 24px;
      display: block;
      width: 100%;
      height: 2px;
      background-color: $primary-color;
    }

    &::before {
      width: 50vw;
      left: -50vw;
      display: none;
    }

    span {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      z-index: 1;

      &.bg--secondary {
        background-color: $secondary-color;
      }

      &::before {
        content: "";
        top: 14px;
        left: 8px;
        position: absolute;
        color: #ffffff;
        width: 12px;
        height: 12px;
        display: block;
        border-right: 2px solid;
        border-top: 2px solid;
        border-radius: 1px;
        transform: rotate(45deg);
        margin-left: 4px;
      }
    }

    &--mobile {
      display: none;

      @include md {
        display: block;
        padding: 0 $gutter-mobile;
        margin-right: 16px;
      }

      .journey-block__item--icon & {
        transform: translateY(80px);
      }

      &::before,
      &::after {
        width: 2px;
        height: 100%;
        left: 35px;
      }

      &::after {
        .journey-block__item--icon & {
          top: -80px;
        }
      }
    }
  }

  &__icon {
    pointer-events: all;
    margin-bottom: 20px;
    width: 75px;
    height: 75px;
    margin-left: -18px;

    @include md {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 0;
      margin-bottom: 10px;
    }

    svg {
      display: block;
      width: 75px !important;
      height: 75px !important;
    }
  }

  &__item-box {
    position: relative;

    @include md {
      .journey-block__step {
        display: none;
      }
    }
  }

  &__item-content {
    display: none;

    @include md {
      display: block;
    }
  }

  &__item-cta {
    @include md {
      width: 100%;
      bottom: auto;
      justify-content: flex-start;
      margin-bottom: 50px;
    }
  }

  &__item-title {
    font-family: var(--font-heading);;
    font-size: 2.6rem;
    line-height: 3.2rem;
    font-weight: 600;
    margin: 15px 0 8px;
    pointer-events: all;

    @include md {
      font-size: 2.1rem;
      line-height: 2.9rem;
    }

    @include sm {
      margin: 0 0 8px;
    }
  }

  &__cards {
    position: relative;
    margin: 50px auto 0;
    padding: 0 calc(100% / 12);

    @include lg {
      padding: 0;
    }
  }

  &__cta {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    @include md {
      margin-top: 15px;
    }

    .std-button {
      padding: 0 24px;
    }
  }
}