<div class="parent">
  <div class="child">
    <div class="children-1">Children 1</div>
    <div class="children-2">Children 2</div>
  </div>
</div>

html {
  box-sizing: border-box;
  padding: 40px;
}
*, *:before, *:after {
  box-sizing: inherit;
}

div {
  min-width: 60px;
  min-height: 60px;
  border: 4px solid blue;
  display: inline-block;
  background: var(--color-bg);
  padding: 20px;
}

.child {
  --color-bg: #76fadd;
  border: 4px solid gold;
  background: var(--color-bg);
}

.children-1 {
  --color-bg: tomato;
}