The [Carbon Design System grid implementation](https://carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options) defines five responsive breakpoints: Small: less than 672px Medium: 672 - 1056px Large: 1056 - 1312px X-Large: 1312 - 1584px Max: greater than 1584px This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size. ### Default Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`. The `"on:match"` event will fire only when a breakpoint change event occurs (e.g., the browser width is resized).