html { font-size: 24px; contain: size layout; }
/* resolves against browser default font size - often 16px  */
@media (width > 30em) { /* applies above 480px viewport */ }
/* resolves against container font size - in this case 24px  */
@container (width > 30em) { /* applies above 720px container */ }

/* custom properties */
@container (var(--color-mode) = dark) {
  a { color: plum; }
}
/* background-color */
@container (background-color = black) {
  h2 { color: white; }
}
/* background-color */
@container (font-style = italic) {
  em { font-style: normal; }
}