<ul class="red">
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul class="green">
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul class="blue">
  <li></li>
  <li></li>
  <li></li>
</ul>

// Layout
BODY {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 1rem;
  font: 16px/1.5 Trebuchet MS, Arial, sans-serif;
}

UL {
  width: 50vw;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  
  --hue: 0;
  
  &::before {
    width: 100%;
    margin-bottom: .75rem;
    text-align: center;
    font-weight: bold;
  }
}

LI {
  height: 3rem;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:nth-child(1) {
    background: hsl(var(--hue), 100%, 35%);
    
    &::before {
      content: 'L: 30%';
    }
  }
  &:nth-child(2) {
    background: hsl(var(--hue), 100%, 50%);
    
    &::before {
      content: 'L: 50%';
    }
  }
  &:nth-child(3) {
    background: hsl(var(--hue), 100%, 65%);
    
    &::before {
      content: 'L: 70%';
    }
  }
}

.red {
  --hue: 30;
  
  &::before {
    content: 'H: 50';
  }
}

.green {
  --hue: 70;
  
  &::before {
    content: 'H: 70';
  }
}

.blue {
  --hue: 200;
  
  &::before {
    content: 'H: 200';
  }
}