@media (min-width: 768px) {
  .key-visual canvas {
    transform: translate3d(0, 0, 0) !important;
  }

  .key-visual__phone--ru,
  .key-visual__phone--en {
    --key-visual-desktop-offset-y: 31px;
  }

  .key-visual-wrapper--counter-stage .key-visual canvas {
    opacity: 0 !important;
    transition: opacity 180ms linear;
  }
}

.key-visual__phone--ru,
.key-visual__phone--en {
  font-weight: 300;
}

@media (min-width: 768px) and (max-height: 820px) {
  .key-visual canvas {
    transform: translate3d(0, 0, 0) !important;
  }

  .key-visual__phone--ru,
  .key-visual__phone--en {
    --key-visual-short-offset-y: -56px;
  }
}

@media (min-width: 768px) and (max-width: 1359px) {
  .header__menu {
    display: none !important;
  }

  .header__button.with-border {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .language-switch {
    margin-left: auto !important;
    margin-right: 34px !important;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .key-visual-wrapper {
    height: 5600px;
  }

  .key-visual-pin {
    height: 100svh;
    min-height: 100svh;
  }

  .key-visual__phone--ru,
  .key-visual__phone--en {
    --key-visual-offset-y: -284px;
  }

  .key-visual__paragraph {
    margin-left: auto;
    margin-right: auto;
    width: min(100cqw, calc(100vw - 32px));
  }

  .key-visual__paragraph:first-child {
    font-size: clamp(26px, 7.2vw, 32px);
  }

  .key-visual__paragraph:nth-child(2) {
    font-size: clamp(24px, 6.4vw, 28px);
  }
}

@media (max-width: 767px) and (max-height: 760px) and (orientation: portrait) {
  .key-visual__phone--ru,
  .key-visual__phone--en {
    --key-visual-offset-y: -220px;
  }

  .counter-section {
    bottom: 8px;
  }

  .counter-section__counter-text {
    font-size: 16px;
  }
}

@media (max-width: 767px) and (orientation: landscape) and (hover: hover) and (pointer: fine) {
  .key-visual__phone--ru,
  .key-visual__phone--en {
    --key-visual-offset-y: 0px;
  }
}