@import "import";

.landscape {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: z(overlay);
  pointer-events: none;

  background: linear-gradient(123deg, #7583c9 10.01%, #b3b5e3 76.75%), #b3b5e3;
  color: color(white);

  display: none;

  &.visible {
    @include flex(column, center, center, $gap: spacer(3));
    pointer-events: auto;
  }

  .content {
    @include flex(column, center, center, $gap: spacer(5));

    .text {
      max-width: 250px;
      text-align: center;
      margin: 0 auto;
      text-wrap: balance;
      font-family: var(--font-family-sans-serif);
      font-size: 1.8rem;
      font-weight: 650;
      line-height: 1em;
    }
  }
}

// @media screen and (orientation:portrait) {
//   .landscape {
//     display: none;
//   }

// }
// @media screen and (orientation:landscape) {
//   .landscape {
//     @include flex(column, center, center, $gap: spacer(3));
//   }

// }