.none {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 2px solid black;
  background-color: #ffffff;
}

.first-face {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 2px solid black;
  background-color: #ffffff;
  background-image: radial-gradient(
    circle at 50% 50%,
    #ff0000ff 19%,
    #ff000000 20%
  );
}

.second-face {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 2px solid black;
  background-color: #ffffff;
  background-image: radial-gradient(
      circle at 75% 25%,
      #000000ff 10%,
      #00000000 11%
    ),
    radial-gradient(circle at 25% 75%, #000000ff 10%, #00000000 11%);
}

.third-face {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 2px solid black;
  background-color: #ffffff;
  background-image: radial-gradient(
      circle at 75% 25%,
      #000000ff 10%,
      #00000000 11%
    ),
    radial-gradient(circle at 50% 50%, #000000ff 15%, #00000000 16%),
    radial-gradient(circle at 25% 75%, #000000ff 10%, #00000000 11%);
}

.fourth-face {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 2px solid black;
  background-color: #ffffff;
  background-image: radial-gradient(
      circle at 25% 25%,
      #000000ff 10%,
      #00000000 11%
    ),
    radial-gradient(circle at 25% 75%, #000000ff 10%, #00000000 11%),
    radial-gradient(circle at 75% 25%, #000000ff 10%, #00000000 11%),
    radial-gradient(circle at 75% 75%, #000000ff 10%, #00000000 11%);
}

.fifth-face {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 2px solid black;
  background-color: #ffffff;
  background-image: radial-gradient(
      circle at 25% 25%,
      #000000ff 10%,
      #00000000 11%
    ),
    radial-gradient(circle at 25% 75%, #000000ff 10%, #00000000 11%),
    radial-gradient(circle at 50% 50%, #000000ff 15%, #00000000 16%),
    radial-gradient(circle at 75% 25%, #000000ff 10%, #00000000 11%),
    radial-gradient(circle at 75% 75%, #000000ff 10%, #00000000 11%);
}

.sixth-face {
  width: 50px;
  height: 50px;
  border-radius: 7px;
  border: 2px solid black;
  background-color: #ffffff;
  background-image: radial-gradient(
      circle at 25% 25%,
      #000000ff 10%,
      #00000000 11%
    ),
    radial-gradient(circle at 25% 50%, #000000ff 12%, #00000000 13%),
    radial-gradient(circle at 25% 75%, #000000ff 10%, #00000000 11%),
    radial-gradient(circle at 75% 25%, #000000ff 10%, #00000000 11%),
    radial-gradient(circle at 75% 50%, #000000ff 12%, #00000000 13%),
    radial-gradient(circle at 75% 75%, #000000ff 10%, #00000000 11%);
}