.dice {
  --dice-size: 120px;
  width: var(--dice-size);
  height: var(--dice-size);
  perspective: calc(var(--dice-size) * 6);
}
.dice .cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(35deg);
}
.dice .face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 14%;
  border-radius: 20%;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f6f1e7 55%, #e6dccb 100%);
  box-shadow: inset 0 0 calc(var(--dice-size) * 0.08) rgba(120, 90, 40, 0.35);
  backface-visibility: hidden;
}
.dice .pip {
  width: 72%;
  height: 72%;
  place-self: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4a4a, #111 70%);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}
.dice .f1 .pip {
  width: 95%;
  height: 95%;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #c0141f 70%);
}