.visual-container {
  text-align: center;
  display: flex;
  justify-content: center;
  padding-bottom: 1em;
}

.grid-visual {
  --num-cols: 2;
  --num-rows: 6;
  --font-size: 1em;
  display: grid;
  grid-template-columns: repeat(var(--num-cols), 1fr);
  grid-template-rows: repeat(var(--num-rows), 1fr);
  min-width: 320px;
  max-height: 400px;
  width: 40%;
  aspect-ratio: 16/9;
  font-family: FontAwesome;
  border: 1px solid #000;
}
.grid-visual-cell {
  text-align: center;
  display: table;
  border: 1px solid #000;
}
.grid-visual-cell div {
  display: table-row;
  text-align: center;
  vertical-align: middle;
  font-size: calc(var(--font-size, 1em) + 5pt);
}
.grid-visual-cell div span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}