Media queries support

[Semigradsky]

Is your feature request related to a problem? Please describe. Currently impossible to add media queries for making responsive design.

Some examples:

@media print { /* rule (1) */
  /* hide navigation controls when printing */
  #navigation { display: none }
  @media (max-width: 12cm) { /* rule (2) */
    /* keep notes in flow when printing to narrow pages */
    .note { float: none }
  }
}

@media (width <= 320px) { /* styles for viewports <= 320px */ }
@media (width > 320px) { /* styles for viewports > 320px */ }

Describe the solution you'd like

interface Styles extends PseudoStyles {
  animations?: CssAnimation[];
+ media?: Styles[]; 
}

Media can be nested within media.

Describe alternatives you've considered Use any existing library for writing CSS styles with javascript, for example emotion.

Additional context Some examples of media queries: https://web.dev/learn/design/media-queries/ Media on MDN: https://developer.mozilla.org/en-US/docs/Web/API/MediaList https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries