Score summary page

If multiple classes use the same properties, you could move those properties into a new class and apply both classes to the element, like you did with .border-radius!

Some examples:

.stack {
  display: flex;
  flex-direction: column;
}

/* properties can be removed from `body`, `.score`, `.result`, `.summary`, `.summary-list` */

.icon::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 5%;
  width: var(--icon-width);
  height: var(--icon-height);
  z-index: 9;
}

.reaction::before {
  background-image: url(./assets/images/icon-reaction.svg);
}

/* using variables: */

.icon::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 5%;
  width: var(--icon-width);
  height: var(--icon-height);
  z-index: 9;
  background-image: var(--icon-image);
}

.reaction::before {
  --icon-image: url(./assets/images/icon-reaction.svg);
}