.telegram-qr-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --telegram-qr-size: 270px;
  --telegram-qr-image-size: 248px;
  width: var(--telegram-qr-size);
  height: var(--telegram-qr-size);
  display: grid;
  place-items: center;
  padding: 11px;
  color: inherit;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(23, 23, 19, .1);
  border-radius: 25px;
  box-shadow: 0 22px 58px rgba(34, 37, 47, .13);
  transform: perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .18s cubic-bezier(.2,.8,.25,1), border-color .18s ease, box-shadow .18s ease;
}

.telegram-qr-card:hover,
.telegram-qr-card:focus-visible {
  color: inherit;
  border-color: rgba(34, 158, 217, .28);
  outline: 0;
  transform: perspective(600px) translateY(-4px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  box-shadow: 0 28px 67px rgba(34, 37, 47, .17);
}

.telegram-qr-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(34, 158, 217, .12), 0 28px 67px rgba(34, 37, 47, .17);
}

.telegram-qr-card img {
  width: var(--telegram-qr-image-size);
  height: var(--telegram-qr-image-size);
  display: block;
  border-radius: 18px;
}

.telegram-open-button {
  min-width: 240px;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  background: #229ed9;
  border-radius: 15px;
  box-shadow: 0 12px 26px rgba(34, 158, 217, .23);
  font: 560 14px/1 "Space Grotesk", sans-serif;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.telegram-open-button:hover,
.telegram-open-button:focus-visible {
  color: #fff;
  outline: 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(34, 158, 217, .28);
}

.telegram-open-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(34, 158, 217, .14), 0 16px 34px rgba(34, 158, 217, .28);
}

.telegram-open-button svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

@media (max-width: 640px) {
  .telegram-qr-card {
    --telegram-qr-size: 242px;
    --telegram-qr-image-size: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telegram-qr-card {
    transform: none;
    transition-duration: .01ms;
  }

  .telegram-qr-card:hover,
  .telegram-qr-card:focus-visible,
  .telegram-open-button:hover,
  .telegram-open-button:focus-visible { transform: none; }
}