Size reduction of content at breakpoint not within design spec

[blackfalcon]

Please verify the version of auro-flight you have installed

@latest

Please describe the bug

Discussed in #101

^{Originally posted by blackfalcon December 1, 2023}

Design left, Implementation right:

It should use heading-300, for breakpoint-sm (320px-576px).

There are 2 issues:

1. The sizes changing at a 659px breakpoint instead of 575px. (We have auro XS as 320px-575px)
2. While a smaller size does appear, it does not match the design spec exactly. (I did comment on the issue requesting the change, but was never asked to review implementation before it was released.)

Design spec

https://www.figma.com/file/4e5FcfFlEhnSW9GveMlKnj/Flight-Line?type=design&node-id=160-7273&mode=design&t=6C51ZphF3iMnHCRM-0

Reproducing the error on the docsite

This issue cannot be reproduced on the Auro docsite

Expected behavior

The size of the content changes should update per the expectation of the design spec.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Additional context

The breakpoint is using the legacy var(--auro-breakpoint-sm) which resolved at 660px not the desired var(--ds-grid-breakpoint-sm) that resolved at 576px. bbfd5bf

This issue is because the element has not yet been updated with the latest versions of WCSS and Auro Design Tokens.

Exit criteria

This issue can be closed once a user can reduce the size of the browser to the specified breakpoint and the type reduces in size as specified by the design spec.

This issue CANNOT be closed without approval from an Auro designer.