@layers in CSS

* { box-sizing: border-box; margin: 0; }
body   { font-family: system-ui; }
button { font: inherit; cursor: pointer; }

/* specificity: (0,3,1); high, but lower layer */
body .card--featured.card--featured {
  border-color: rgba(127,255,138,.4);
  background:   rgba(127,255,138,.07);
  color:        #7fff8a;
}

/* specificity: (0,1,0); low, but higher layer */
.card--featured {
  border-color: rgba(64,217,255,.45);
  background:   rgba(64,217,255,.08);
  color:        #40d9ff;
}