.banner-wrap {
  position: relative;
  width: 100vw;
  height: calc(100vw / 4 * 3);

  .upload {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #999;
    text-shadow: 2px 2px 2px #ccc;
    background-color: #f3f3f3;
    user-select: none;
  }

  .banner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .banner-fonts {
    position: absolute;
    white-space: nowrap;
    line-height: 1em;

    &:hover {
      &:not(:global(.engine-live-editing)) {
        border: 1px dotted #187aff;
        background-color: rgba(7, 33, 70, 0.1);
      }
    }
  }

  --chessboard-color: #ececec;
  --chessboard-deg: 45deg;

  .banner-none {
    background-image: linear-gradient(var(--chessboard-deg), var(--chessboard-color) 26%, transparent 26%, transparent 76%, var(--chessboard-color) 74%, var(--chessboard-color)),
      linear-gradient(var(--chessboard-deg), var(--chessboard-color) 26%, transparent 26%, transparent 76%, var(--chessboard-color) 74%, var(--chessboard-color));
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    background-repeat: repeat;
    border: 1px solid #cfcfcf;
  }
}
