Custom PCSS breakpoints

media.pcss

/**
 *
 * Conversion Table (base 16px)
 *  30em → 480px
 *  48em → 768px
 *  60em → 960px
 *  80em → 1280px
 * 100em → 1600px
 *
 */

@custom-media --from-extraSmall (min-width: 30em);
@custom-media --from-small      (min-width: 48em);
@custom-media --from-medium     (min-width: 60em);
@custom-media --from-large      (min-width: 80em);
@custom-media --from-extraLarge (min-width: 100em);

@custom-media --to-extraSmall   (max-width: 30em);
@custom-media --to-small        (max-width: 48em);
@custom-media --to-medium       (max-width: 60em);
@custom-media --to-large        (max-width: 80em);
@custom-media --to-extraLarge   (max-width: 100em);

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

@custom-media --reduced-motion  (prefers-reduced-motion: reduce);
@custom-media --light-scheme    (prefers-color-scheme: light);
@custom-media --dark-scheme     (prefers-color-scheme: dark);