.unsupported-screen-size {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: $pad-medium;

  // Overlay below 768px
  @media (min-width: $break-xs) {
    display: none;
  }

  // No overlay when printing
  @media print {
    display: none;
  }

  img {
    width: 160px;
  }

  &__text {
    text-align: center;

    h1 {
      font-size: $small;
      font-weight: $bold;
    }

    p {
      font-size: $xx-small;
    }
  }
}