style/cwdimensions.less
// use less variables for media queries because you can't use css variables in those: https://www.w3.org/TR/css-variables-1/#using-variables
@medium-screen-min-width: 392px;
@large-screen-min-width: 556px;

.crosswords-js {
  // Default grid size, this may be overridden
  // in ../src/crossword-gridview.mjs:newCrosswordGridView()
  --row-count: 15;
  --column-count: 15;

  --grid-line-size: 1px;

  // minimum sizes:
  --grid-cell-size: 1.3rem;
  --letter-size: 1.14rem;
  --label-size: 0.4rem;
  --revealed-size: 0.4rem;
  --clue-label-width: 3rem;
  --clue-text-width: 17rem;
}

@media screen and (max-width: (@medium-screen-min-width - 1px)) {
  .crosswords-js {
    --grid-cell-size: 1.3rem;
    --letter-size: 1.14rem;
    --label-size: 0.4rem;
    --revealed-size: 0.4rem;
    --clue-text-width: 17rem;
  }
}

@media screen and (min-width: @medium-screen-min-width) and (max-width: (@large-screen-min-width - 1px)) {
  .crosswords-js {
    --grid-cell-size: 1.5625rem;
    --letter-size: 1.14rem;
    --label-size: 0.4rem;
    --revealed-size: 0.4rem;
    --clue-text-width: 20rem;
  }
}

@media screen and (min-width: @large-screen-min-width) {
  .crosswords-js {
    --grid-cell-size: 2.25rem;
    --letter-size: 1.7rem;
    --label-size: 0.4em;
    --revealed-size: 0.6rem;
    --clue-text-width: 20rem;
  }
}
