.btn-arrow {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  @include breakpoint-down('deskS') {
    display: none;
  }

  &__item {
    width: 40px;
    height: 40px;
    background: $red;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;

    img {
      transition: .4s ease;
      will-change: transform;
    }

    &_prev {

      &:hover {

        img {
          transition: .4s ease;
          transform: translateX(-3px);
        }
      }
    }

    &_next {

      &:hover {

        img {
          transition: .4s ease;
          transform: translateX(3px);
        }
      }
    }

    &_bottom {
      width: 56px;
      height: 56px;

      &:hover {

        img {
          transition: .4s ease;
          transform: translateY(3px);
        }
      }
    }

    &.swiper-button-disabled {
      pointer-events: none;
    }
  }
}