Site-wide breakpoints are defined in scss/modules/_utils.responsive.scss. Example definition:

$site_breakpoints: (
   xs: (
      name: 'xs',
      mq: "(min-width: 0px)",
      mq-isolate: "(max-width: 451px)",
      font-base:9px
   ),
   s: (
      name: 's',
      mq: "(min-width: 451px)",
      mq-isolate: "(min-width: 451px) and (max-width: 700px)",
      font-base:9px
   ),
   m: (
      name: 'm',
      mq: "(min-width: 701px)",
      mq-isolate: "(min-width: 701px) and (max-width: 960px)",
      font-base:9px
   ),
   l: (
      name: 'l',
      mq: "(min-width: 961px)",
      mq-isolate: "(min-width: 961px) and (max-width: 1240px)",
      font-base:10px
   ),
   xl: (
      name: 'xl',
      mq: "(min-width: 1241px)",
      mq-isolate: "(min-width: 1241px) and (max-width: 1920px)",
      font-base:10px
   ),
   xxl: (
      name: 'xxl',
      mq: "(min-width: 1921px)",
      mq-isolate: "(min-width: 1921px) and (max-width: 4096px)",
      font-base:11px
   ),
);

The definition holds the breakpoints, their names and their media queries. Each breakpoint has both a mobile-first media query (this breakpoint and up) and a breakpoint isolation media query (to target a single breakpoint). The breakpoint definition is used throughout the system to generate breakpoint-specific utilities. To use a breakpoint in your own components:

@media screen and #{map-deep-get($site_breakpoints, $breakpoint, "mq")}

Where $breakpoint is the name of the breakpoint the retrieve. The value to retrieve can be "mq" (this breakpoint and up) or "mq-isolate". The breakpoint array can also be used to store other breakpoint-specific properties.