open-props/src/props.media.css

<div align="center">

@custom-media --motionOK      (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK   (prefers-reduced-motion: reduce);
@custom-media --opacityOK     (prefers-reduced-transparency: no-preference);
@custom-media --opacityNotOK  (prefers-reduced-transparency: reduce);
@custom-media --useDataOK     (prefers-reduced-data: no-preference);
@custom-media --useDataNotOK  (prefers-reduced-data: reduce);

@custom-media --OSdark        (prefers-color-scheme: dark);
@custom-media --OSlight       (prefers-color-scheme: light);

@custom-media --highContrast  (prefers-contrast: more);
@custom-media --lowContrast   (prefers-contrast: less);

@custom-media --invertedColors  (inverted-colors: inverted);
@custom-media --forcedColors  (forced-colors: active);

@custom-media --portrait      (orientation: portrait);
@custom-media --landscape     (orientation: landscape);

@custom-media --HDcolor       (dynamic-range: high) or (color-gamut: p3);

@custom-media --touch         (hover: none) and (pointer: coarse);
@custom-media --stylus        (hover: none) and (pointer: fine);
@custom-media --pointer       (hover) and (pointer: coarse);
@custom-media --mouse         (hover) and (pointer: fine);

@custom-media --xxs-only      (0px <= width < 240px);
@custom-media --xxs-n-above   (width >= 240px);
@custom-media --xxs-n-below   (width < 240px);
@custom-media --xxs-phone     (--xxs-only) and (--portrait);

@custom-media --xs-only       (240px <= width < 360px);
@custom-media --xs-n-above    (width >= 360px);
@custom-media --xs-n-below    (width < 360px);
@custom-media --xs-phone      (--xs-only) and (--portrait);

@custom-media --sm-only       (360px <= width < 480px);
@custom-media --sm-n-above    (width >= 480px);
@custom-media --sm-n-below    (width < 480px);
@custom-media --sm-phone      (--sm-only) and (--portrait);

@custom-media --md-only       (480px <= width < 768px);
@custom-media --md-n-above    (width >= 768px);
@custom-media --md-n-below    (width < 768px);
@custom-media --md-phone      (--md-only) and (--portrait);

@custom-media --lg-only       (768px <= width < 1024px);
@custom-media --lg-n-above    (width >= 1024px);
@custom-media --lg-n-below    (width < 1024px);
@custom-media --lg-phone      (--lg-only) and (--portrait);

@custom-media --xl-only       (1024px <= width < 1440px);
@custom-media --xl-n-above    (width >= 1440px);
@custom-media --xl-n-below    (width < 1440px);

@custom-media --xxl-only      (1440px <= width < 1920px);
@custom-media --xxl-n-above   (width >= 1920px);
@custom-media --xxl-n-below   (width < 1920px);