GEL Breakpoints' MEDIA_QUERY_TYPOGRAPHY object not reflective of device sizes

[RichardPK]

Is your feature request related to a problem? Please describe.
The current LAPTOP_AND_LARGER MEDIA_QUERY_TYPOGRAPHY breakpoint within packages/utilities/gel-foundations/src/breakpoints.js has the min-width GEL_GROUP_CD_MIN_WIDTH, which is 600px. The UX team use a 600px break point to describe a tablet or a very small notebook, not a laptop. There is no MEDIA_QUERY_TYPOGRAPHY breakpoint for 1008px, which is the 'laptop and larger' measurement used by designers.

Describe the solution you'd like

• Rename the LAPTOP_AND_LARGER MEDIA_QUERY_TYPOGRAPHY object key to LARGE_SMARTPHONE... or TABLET... ..._AND_LARGER
• Add another key-value pair to the MEDIA_QUERY_TYPOGRAPHY for LAPTOP_AND_LARGER using a 1008px const.
• Add a final key-value pair for a 1280px breakpoint, which is the largest size the designers tend to work towards.

Testing notes
[Tester to complete]

Dev insight:

• The current LAPTOP_AND_LARGER 600px breakpoint is being used in 19 places, so this update will need to be matched with changes across the rest of the component library to reflect the new break point values.

• This feature is expected to need manual testing.

Additional context
Example of design breakpoints

[RichardPK]

After some digging and conversations with design - there is a distinction between typography break points and grid break points. Rather than changing the way these breakpoints are named (which would have a cascading impact across psammead and simorgh), I have reorged the breakpoints component to make it clearer which consts are for typography, and which are for layouts.