1px overlap between minMedia and MaxMedia

[raff-r]

Issue

When using both minMedia and maxMedia there is a 1px overlap where the breakpoints do not align.

e.g

import { minMedia, maxMedia, Button } from '@zopauk/react-components';
import styled from 'styled-components';

const StyledDiv = styled.div`
  display: block;
  ${minMedia.desktop`
    display: none;
  `}
`;

const StyledDiv2 = styled.div\`
  display: block;
  ${maxMedia.desktop\`
    display: none;
  \`}
\`;

<Button>
  <StyledDiv>Content 1</StyledDiv>
  <StyledDiv2>Content 2</StyledDiv2>
</Button>;

Rendered at 1279px

Rendered at 1280px

Rendered at 1281px

Proposed Solution:

When using maxMedia minus 1px from breakpoint
https://github.com/zopaUK/react-components/blob/a1475fffc2b240723f0cb8544ff7f37b19689105/src/helpers/responsiveness.ts#L20

@media (${direction}-width: ${direction === 'max' ? breakpoints[sizeLabel] - 1 : breakpoints[sizeLabel]}px) {
      ${style};
      ${rest};
    }