Some breakpoint classes are generating using ems instead of rems

[randimays]

Bug Report

• [x] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

I'm using some VADS classes to handle spacing between a map and some text underneath. It is working correctly when the browser font size is set to medium (standard). But when I set the browser font size to "very small" or "small," the responsive styles are incorrectly applied.

This is the expected spacing between the map and the text showing at medium font size. This screenshot was taken at 400px screen width.

Here is the container for the text:

<div
    className="search-result-title vads-u-margin-y--3 mobile-lg:vads-u-margin-y--0"
    ref={resultRef} 
    tabIndex={0}
>
    ...
</div>

When I set the browser font size to "very small" or "small," the space is removed because now the mobile-lg:vads-u-margin-y--0 class is applying (even though that should be applying at 481px+). These screenshots were also taken at 400px screen width. Note that the space between the map and the first line of text is gone.

Screenshot from the DOM. I think the media query should be calculating on rem instead of em.

What I expected to happen

Spacing should be consistent for the same screen width when browser font size is increased/decreased from the normal.

To adjust font size on Chrome, go to chrome://settings in the browser, search for "font", and change the dropdown value next to Font size.

Reproducing

Steps to reproduce:

1. Add a mobile-lg prefix to an element's style class
2. View the browser at 400px screen width
3. Notice that the class is being applied and should not

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• [ ] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [x] This bug is not blocking any work
• [ ] Other

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc