// Step section
// Connect sections through a dotted line
//

@include media-breakpoint-down(lg) {
  .section-step-lg {
    padding-bottom: 3rem;

    + .section-step-lg {
      padding-top: 3rem;
    }

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

@include media-breakpoint-up(lg) {
  .section-step-lg {
    position: relative;
    padding-bottom: 5rem;

    + .section-step-lg {
      padding-top: 5rem;
    }

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


    &:not(:last-child) {
      &:before {
        content: "";
        display: block;
        width: 360px;
        height: 100px;
        background: $section-step-bg no-repeat center;
        background-size: 360px 100px;
        transform: rotate(40deg);
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: -80px;

        @include media-breakpoint-down(md) {
          transform: rotate(90deg) scale(.7);
          bottom: 20px;
        }
      }
    }

    &:nth-child(odd) {
      .row {
        > div:first-child {
          order: 2;
        }
        > div:last-child {
          order: 1;
        }
      }
    }

    &:nth-child(even) {
      &:before {
        background: $section-step-even-bg no-repeat center;
        background-size: 360px 100px;
        transform: rotate(-40deg);

        @include media-breakpoint-down(md) {
          transform: rotate(-90deg) scale(.7);
          bottom: 20px;
        }
      }
    }
  }
}