.dot {
  @apply bg-grey-light rounded-full flex items-center justify-center shadow;
  width: 40px;
  height: 40px;
}

.dot__character {
  /**
   * emoji scaling solution
   * @resource https://stackoverflow.com/questions/44142464/how-do-i-horizontally-center-an-emoji
   */
  display: inline-block;
  font-size: 4em;
  transform: scale(.25);
  margin: -1em -.333em;
}