CSS Library: update breakpoint names and adjust small-desktop-screen value

[jamigibbs]

Chromatic

https://3233-update-breakpoints--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

This will adjust the small-desktop-screen breakpoint value from 1008px to 1024px to sync it with the USWDS desktop breakpoint.

I'm also adding the new breakpoint names to breakpoints.json so that custom properties will be available for teams to use:

• --mobile
• --mobile-lg
• --desktop
• --desktop-lg

Closes department-of-veterans-affairs/vets-design-system-documentation#3233

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)