.mobile-device-gate {
  display: none;
}

@media (min-width: 768px) {
  html,
  body {
    min-height: 100%;
  }

  body {
    overflow: hidden;
    background: #f5f8f7;
    color: #0e1d1b;
  }

  body > :not(.mobile-device-gate) {
    display: none !important;
  }

  .mobile-device-gate {
    box-sizing: border-box;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 6vw, 5rem);
    background:
      linear-gradient(135deg, rgb(0 75 65 / 92%), rgb(42 157 143 / 88%)),
      url("../../assets/img/sbyDroneShare.webp") center / cover;
    font-family: var(--font-family-primary, "Kanit", sans-serif);
  }

  .mobile-device-gate__panel {
    width: min(100%, 30rem);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 0.5rem;
    background: rgb(245 248 247 / 96%);
    box-shadow: 0 1.5rem 4rem rgb(14 29 27 / 28%);
    text-align: center;
  }

  .mobile-device-gate__logo {
    width: 5.5rem;
    height: auto;
    margin-block-end: 1.25rem;
  }

  .mobile-device-gate h1 {
    color: var(--color-charcoal);
    line-height: 1;
  }

  .mobile-device-gate p {
    margin: 0.9rem auto 0;
    max-width: 24rem;
    color: rgb(14 29 27 / 82%);
    font-size: 12px;
    line-height: 1.45;
  }

  .mobile-device-gate__qr {
    width: min(70vw, 15rem);
    aspect-ratio: 1;
    margin: 1.5rem auto 0;
    display: grid;
    place-items: center;
    border: 0.5rem solid #ffffff;
    border-radius: 0.375rem;
    background: #ffffff;
    box-shadow: 0 0.75rem 2rem rgb(14 29 27 / 18%);
  }

  .mobile-device-gate__qr canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
  }

  .mobile-device-gate__url {
    overflow-wrap: anywhere;
    color: #004b41;
    font-size: 12px;
  }
}