.slide-info {

  &__content {
    max-width: 869px;
    transform: translateX(50px);
    opacity: 0;

    @include breakpoint-down('deskL') {
      max-width: 580px;
    }

    @include breakpoint-down('deskM') {
      max-width: 459px;
    }

    @include breakpoint-down('deskS') {
      max-width: 334px;
    }
  }

  &__title {
    color: $white;
    margin-bottom: 16px;

    @include breakpoint-down('deskS') {
      font-size: 31px;
    }
  }

  &__desc {
    color: $white;
    margin-bottom: 32px;
    max-width: 580px;

    @include breakpoint-down('deskS') {
      margin-bottom: 16px;
    }
  }

  &__link {
    display: flex;
    align-items: center;

    &-text {
      color: $white;
      margin-right: 10px;
    }

    &-icon {
      width: 34px;
      height: 19px;
      background: $red;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &__image {
    position: absolute;
    right: -70%;
    bottom: -250px;
    width: 141%;
    opacity: 0;
    transform: translateX(100%);
    transition: .4s ease;
    z-index: -1;

    @include breakpoint-down('deskL') {
      width: 155%;
      right: -80%;
      bottom: -271px;
    }

    @include breakpoint-down('deskM') {
      width: 159%;
    }

    @include breakpoint-down('deskS') {
      bottom: -142px;
    }

    @include breakpoint-down('tabM') {
      bottom: auto;
      top: 17%;
      width: 200%;
      right: -102%;
    }

    &--one {
      right: 0;
      width: 892px;
      bottom: 85px;

      @include breakpoint-down('deskL') {
        width: 750px;
      }

      @include breakpoint-down('deskM') {
        width: 650px;
      }

      @include breakpoint-down('deskS') {
        width: 500px;
      }

      @include breakpoint-down('tabM') {
        bottom: auto;
        width: 100%;
      }
    }

    &--two {
      right: 105px;
      bottom: 0;
      width: auto;

      @include breakpoint-down('deskL') {
        width: 650px;
      }

      @include breakpoint-down('deskM') {
        width: 550px;
      }

      @include breakpoint-down('deskS') {
        right: 0;
        width: 450px;
      }

      @include breakpoint-down('tabM') {
        bottom: auto;
        width: 100%;
      }
    }

    &--three {
      right: 0;
      bottom: 88px;
      width: 933px;

      @include breakpoint-down('deskM') {
        width: 780px;
      }

      @include breakpoint-down('deskS') {
        right: 0;
        width: 600px;
      }

      @include breakpoint-down('tabM') {
        bottom: auto;
        width: 100%;
      }
    }

    &--four {
      right: 30px;
      bottom: 150px;
      width: 870px;

      @include breakpoint-down('deskM') {
        width: 650px;
      }

      @include breakpoint-down('deskS') {
        right: 0;
        width: 450px;
      }

      @include breakpoint-down('tabM') {
        bottom: auto;
        width: 100%;
      }
    }

    &--five {
      right: 180px;
      bottom: 73px;
      width: 631px;

      @include breakpoint-down('deskL') {
        width: 531px;
      }

      @include breakpoint-down('deskM') {
        width: 450px;
        right: 90px;
      }

      @include breakpoint-down('deskS') {
        right: 0;
        width: 340px;
      }

      @include breakpoint-down('tabM') {
        bottom: auto;
        width: 100%;
      }
    }
  }
}