@media (min-width: 1025px) {
  .channels__detail {
    transition:
      opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .channels__detail.is-switching {
    opacity: 0.88;
    transform: translateY(3px);
  }

  .channels__detail-title {
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .channels__detail.is-switching .channels__detail-title {
    opacity: 0.78;
  }

  .channels__phone .channels__phone-img,
  .channels__phone-img[class*="channels__phone-img--"] {
    position: absolute;
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.97);
    transition:
      opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    pointer-events: none;
  }

  .channels__phone-img.is-active,
  .channels__detail.is-switching .channels__phone-img.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 2;
  }

  .channels__detail.is-switching .channels__phone-img:not(.is-active):not(.is-leave-up):not(.is-leave-down) {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.97);
  }

  .channels__phone-img.is-from-down {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.97);
    transition: none;
    z-index: 2;
  }

  .channels__phone-img.is-from-up {
    opacity: 0;
    transform: translate3d(0, -32px, 0) scale(0.97);
    transition: none;
    z-index: 2;
  }

  .channels__phone-img.is-leave-up {
    opacity: 0;
    transform: translate3d(0, -32px, 0) scale(0.97);
    z-index: 1;
  }

  .channels__phone-img.is-leave-down {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.97);
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .channels__detail,
  .channels__detail-title,
  .channels__phone-img {
    transition: none !important;
  }
}