page-backup-game {
  ion-content.content {
    background: white;
  }
  .grid-container {
    display: grid;
    grid-template-rows: 1.5fr 1fr;
    grid-auto-columns: 100%;
    height: 75vh;
    .key-container {
      grid-row-start: 1;
      align-self: center;
      @media (max-height: 550px) {
        grid-template-rows: 1fr 1fr;
      }
      .word-container {
        height: 65%;
        .word-slides {
          .word {
            display: grid;
            align-content: center;
            background-color: #f6f7fc;
            border-radius: 3px;
            color: color($colors, secondary);
            min-width: 190px;
            min-height: 171px;
            @media (max-width: 400px) {
              min-width: 150px;
              min-height: 130px;
            }
            span {
              font-weight: bold;
              font-size: 35px;
              letter-spacing: 2.5px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              padding: 1rem;
              .button {
                height: 3rem;
                font-size: 14px;
              }
            }
            .dash-line {
              border-bottom: 1px color($colors, primary) dashed;
              position: absolute;
              top: 11.3rem;
              left: 15%;
              right: 15%;
            }
          }
          .word-number {
            margin-top: 1rem;
            font-weight: bold;
          }
        }
      }
      .password {
        padding: 2rem;
        &-title {
          margin-bottom: 2rem;
        }
        &-text {
          margin-top: 2rem;
        }
      }
    }
    .mnemonic-words-container {
      display: grid;
      grid-template-columns: auto minmax(200px, 500px) auto;
      grid-row-start: 2;
      align-self: end;
      .mnemonic-words {
        grid-column-start: 2;
        .bottom-title {
          font-size: 16px;
          margin-bottom: 1rem;
          text-align: center;
        }
        .words {
          text-align: center;
          .button {
            box-shadow: none;
            background-color: #f6f6f6;
            color: color($colors, dark);
            height: 3rem;
            font-size: 14px;
            margin: 5px;
          }
        }
      }
      .confirm-container {
        grid-column-start: 2;
        text-align: center;
        align-self: end;
      }
    }
  }
}
