off-by-one error for breakpoint mixins using max-width

[wkeese]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Looking at https://github.com/carbon-design-system/carbon/blob/master/packages/layout/scss/_breakpoint.scss, using a mixin like

@carbon--breakpoint-down(lg)

will generate CSS like below (or the equivalent in rem):

@media (max-width: 1056px) { ... }

IIUC, that means width <= 1056px, whereas what we want is width < 1056px. I.E. a query that doesn't match when width === 1056px.

Maybe it should be generating @media not (min-width: 1056px) instead?

Or by using media queries level 4 (not sure if that works for all browsers that carbon supports), generate:

@media (width < 1056) { ... }