:root {
  --color-strength: 150;
}

section {
  font-family: system-ui;
  font-size: 20px;
}

div[data-integer-value] {
  min-height: 10px;
  margin: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: solid darkgray;
  background-color: darkgray;
  display: flex;
  justify-content: center;
}

.lhs,
.rhs {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  background-color: rgb(var(--red, 0), var(--green, 0), var(--blue, 0));
}

.lhs {
  margin-right: 2px;
}

.rhs {
  margin-left: 2px;
}

div[data-integer-value]:first-of-type > .lhs {
  background-color: rgb(0, 102, 128);
}

div[data-integer-value]:nth-of-type(1) > .lhs + .rhs,
div[data-integer-value]:nth-of-type(2) > .lhs + .rhs,
div[data-integer-value]:nth-of-type(3) > .lhs + .rhs {
  background-color: rgb(0, 102, 128);
}