Checkbox mis-alignment on mobile views

Describe the bug
Checkbox mis-alignment on mobile views

To Reproduce
Steps to reproduce the behavior:

1. Go to https://stackoverflow.design/product/components/checkbox
2. Resize viewport to less than 640px

Expected behavior
Checkboxes to be aligned with their labels

Screenshots

Example Checkboxes on Medium vs Small Screens

Zoomed in example of checkboxes with alignment lines

Example of checkbox itself being resized on small displays

Some important styling rules impacting this currently

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 101

Additional context

The culprit looks like it's the fact that we shrink the font to 11px for all screens under 640px

Worth noting that the main site actually has an additional edge case here. The checkbox inherits it's font from its parent, so if it's not nested in something with an explicit font, it'll get downsized 2px as well from 11px to 9px- this doesn't show up on stacks demo page, because the example panels set thefont-size` explicitly.

Open the checkbox component at https://stackoverflow.design/product/components/checkbox and reproduce the issue with a viewport below 640px. Inspect the styling associated with the small-screen font size and checkbox dimensions; it is done when the checkbox remains aligned with its label and does not resize unexpectedly on small displays.