style.css

.elian-grid {
  display: inline-grid;

  grid-gap: 0.1em;
  grid-template-columns: 1.7em 1.7em 1.7em;
  grid-template-rows: 1.7em 1.7em 1.7em;
  grid-template-areas:
    "c f i"
    "b e h"
    "a d g";
  align-items: center;
  justify-content: start;
  text-align: center;
}
@media ( max-width: 850px ) {
  div.elian-grid {
    font-size: 1rem;
  }
}
@media ( max-width: 590px ) {
  div.elian-grid {
    font-size: 0.7rem;
  }
}
@media ( max-width: 450px ) {
  div.elian-grid {
    float: none;
    clear: both;
    margin: 0.5rem;
    font-size: 0.7rem;
  }
}
.elian-grid span:nth-child(1) {grid-area: a}
.elian-grid span:nth-child(2) {grid-area: b}
.elian-grid span:nth-child(3) {grid-area: c}
.elian-grid span:nth-child(4) {grid-area: d}
.elian-grid span:nth-child(5) {grid-area: e}
.elian-grid span:nth-child(6) {grid-area: f}
.elian-grid span:nth-child(7) {grid-area: g}
.elian-grid span:nth-child(8) {grid-area: h}
.elian-grid span:nth-child(9) {grid-area: i}

.toggle-ebs:checked + .ebs {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}
input.toggle-ebs {
  display: none;
}
.toggle-ebs {
  position: sticky;
  top: 0;
}