@Custom media example

rupture.css

/* breakpoints */
:root {                                   /* px size at 16px base font size */                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
  @custom-media --xs (width < 25em);      /* 400px */
  @custom-media --s (width < 35.7em);     /* 600px */
  @custom-media --m (width < 50em);       /* 800px */
  @custom-media --l (width < 65.625em);   /* 1050px */   
  @custom-media --hd (width < 112.5em);   /* 1800px */  
 
  @custom-media --above-xs (width >= 25em);
  @custom-media --above-s (width >= 35.7em);  
  @custom-media --above-m (width >= 50em); 
  @custom-media --above-l (width >= 65.625em);  
  @custom-media --above-hd (width >= 112.5em); 
  
  @custom-media --retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
  @custom-media --landscape (orientation: landscape);
  @custom-media --portrait (orientation: portrait);  
}

/* call it */
.foo {
  border: 1px solid green;
  
  @media (--above-s) {
    border: 3px solid red
  }
}