<div class="dice-container">
  <div class="dice" role="img" alt="1">
    <div class="pip"></div>
  </div>

  <div class="dice" role="img" alt="2">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>

  <div class="dice" role="img" alt="3">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>

  <div class="dice" role="img" alt="4">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>

  <div class="dice" role="img" alt="5">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>

  <div class="dice" role="img" alt="6">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</div>

:root {
  --diceWidth: 68px;
  --paddingAndGap: 2px;
  --pipWidth: 19px;
  --baseColor: #212121;
  --hoverColor: #757575;
}

.dice-container {
  display: flex;
  flex-wrap: wrap;
}

.dice-container > * {
  margin-bottom: 1rem;
}

.dice-container > :not(:first-child) {
  margin-left: 1rem;
}

.dice {
  width: var(--diceWidth);
  height: var(--diceWidth);
  border: 5px solid var(--baseColor);
  border-radius: 10px;
  display: grid;
  grid-template-rows: 33% 33% 33%;
  grid-template-columns: 33% 33% 33%;
  grid-gap: var(--paddingAndGap);
  padding: var(--paddingAndGap);
}
.dice .pip {
  background-color: var(--baseColor);
  width: var(--pipWidth);
  height: var(--pipWidth);
  border-radius: 10px;
}
.dice:hover {
  cursor: pointer;
}
.dice:hover {
  border-color: var(--hoverColor);
}
.dice:hover .pip {
  background-color: var(--hoverColor);
}

.dice .pip:nth-child(1) {
  grid-area: a;
}
.dice .pip:nth-child(2) {
  grid-area: b;
}
.dice .pip:nth-child(3) {
  grid-area: c;
}
.dice .pip:nth-child(4) {
  grid-area: d;
}
.dice .pip:nth-child(5) {
  grid-area: e;
}
.dice .pip:nth-child(6) {
  grid-area: f;
}
.dice[alt='1'] {
  grid-template-areas:
    '. . .'
    '. a .'
    '. . .';
}
.dice[alt='2'] {
  grid-template-areas:
    '. . a'
    '. . .'
    'b . .';
}
.dice[alt='3'] {
  grid-template-areas:
    '. . a'
    '. b .'
    'c . .';
}
.dice[alt='4'] {
  grid-template-areas:
    'a . b'
    '. . .'
    'c . d';
}
.dice[alt='5'] {
  grid-template-areas:
    'a . b'
    '. c .'
    'd . e';
}
.dice[alt='6'] {
  grid-template-areas:
    'a . b'
    'c . d'
    'e . f';
}