body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
  font-family: Arial, sans-serif;
}

.domino {
  width: 100px;
  height: 200px;
  background: white;
  border: 2px solid black;
  border-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.half {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.top {
  border-bottom: 2px solid black;
}

.pip {
  width: 15px;
  height: 15px;
  background: black;
  border-radius: 50%;
  position: absolute;
}

.pip[data-number="1"] {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pip[data-number="2"] {
  left: 25%;
  top: 25%;
}

.pip[data-number="3"] {
  right: 25%;
  top: 25%;
}

.pip[data-number="4"] {
  left: 25%;
  bottom: 25%;
}

.pip[data-number="5"] {
  right: 25%;
  bottom: 25%;
}

.pip[data-number="6"] {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pip[data-number="7"] {
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
}