.var {
  &-line {
    max-width: 1440px;
    margin: 0 auto;
  }

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;

    img {
      width: 257px;
      height: 257px;
      border-radius: 32px;
      box-shadow: 0 11px 20px 0 rgba(41, 50, 76, 0.31);
    }

    span {
      max-width: 257px;
      margin: 25px 0 0;
      color: #000000;
      font-size: 18px;
      font-family: 'PT Sans', sans-serif;
      line-height: 1.15;
      text-align: center;
    }
  }
}


@media screen and (max-width: 1200px) {
  .var-item {
    span {
      font-size: 16px;
    }

    .var-line {
      height: auto;
    }
  }

  .var-line {
    .col-lg-4 {
      order: 1;

      &:nth-child(1) {
        order: 1;
      }

      &:nth-child(2) {
        order: 2;
      }

      &:nth-child(3) {
        order: 3;
      }

      &:nth-child(4) {
        order: 6;
      }

      &:nth-child(5) {
        order: 5;
      }

      &:nth-child(6) {
        order: 4;
      }

      &:nth-child(7) {
        order: 7;
      }

      &:nth-child(8) {
        order: 8;
      }

      &:nth-child(9) {
        order: 8;
      }
    }
  }
}



@media screen and (min-width: 1200px) {
  .var-line {
    margin-bottom: 50px;
    padding-bottom: 30px;
    background: url('../../img/holiday/icons/scenario-path.svg') top left no-repeat;

    .row {
      .col-lg-4 {
        &:nth-child(1) {
          transform: translateX(0) translateY(-30px);
        }

        &:nth-child(2) {
          transform: translateX(-35px) translateY(75px);
        }

        &:nth-child(3) {
          transform: translateX(-85px) translateY(-45px);
        }

        &:nth-child(4) {
          transform: translateX(125px) translateY(30px);
        }

        &:nth-child(5) {
          transform: translateX(50px) translateY(90px);
        }

        &:nth-child(6) {
          transform: translateX(10px) translateY(-45px);
        }

        &:nth-child(7) {
          transform: translateX(-10px) translateY(30px);
        }

        &:nth-child(8) {
          transform: translateX(10px) translateY(80px);
        }
      }
    }
  }
}

@media screen and (max-width: 576px) {
  .var-item {
    img {
      max-width: 100%;
      height: auto;
    }
  }
}