CSS Breakpoint Variables

_breakpoints.css

/**
 * BREAKPOINTS THRESHOLDS
 */
:root {
  --breakpoint-threshold--mobile: 22em;       /* Roughly, a min-width for handsets */
  --breakpoint-threshold--small: 30em;        /* Roughly, a max-width for handsets in landscape  */
  --breakpoint-threshold--medium: 49.125em;   /* Roughly, a min-width for tablets  */
  --breakpoint-threshold--large: 64em;        /* Roughly, a max-width for tablets in landscape  */
  --breakpoint-threshold--xLarge: 90em;       /* Someone probably has a monitor 💻 */
}