.process {
  background-color: $gray-lighter;
  overflow-x: hidden;

  .banner {
    @include make-row();

    @media (min-width: $screen-md-min) {
      text-align: center;
    }

    .process-steps {
      @include make-sm-column(6);

      @media (min-width: $screen-sm-min) {
        text-align: left;
      }

      @include make-md-column(4);

      .steps {
        li {
          @media (min-width: $screen-sm-min) {
            width: 30%;

            &:last-child {
              width: auto;
              min-width: 0;
            }
          }
        }
      }
    }

    .step-title {
      margin-bottom: 0;
      font-size: 24px;
      line-height: 1;

      @media (min-width: $screen-sm-min) {
        margin-top: 0;
      }

      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
        position: absolute;
        left: 0;
        bottom: 100%;
        width: 100%;
        text-align: center;
        height: 52px;
        line-height: 52px;
        font-size: 20px;
      }

      @include make-md-column(4);
    }

    .info {
      @include make-sm-column(6);

      @media (min-width: $screen-sm-min) {
        text-align: right;
      }

      @include make-md-column(4);
    }
  }
}