`$header-styles` doesn't apply line-height correct when `$global-font-size` != 100%

## What should happen?
First increase or decrease the `$global-font-size` variable so it isn't `100%`. When you set the line-height in the mapping of the `$header-styles` variable, you expect it to have the computed style in pixels, matching with your value set in the variable.

## What happens instead?
The line-height is too large.

## Possible Solution
No idea how to solve this.

## Test Case and/or Steps to Reproduce (for bugs)
How to reproduce:
1. Set the `$global-font-size` variable to `125%`.
2. Set the following `$header-styles` variable:
$header-styles: (
small: (
'h1': ('font-size': 36, 'line-height': 48),
),
);

## Your Environment
- Foundation version(s) used: Version 6.5.3
- Browser(s) name and version(s): All browsers
- Device, Operating System and version: All OS
- Link to your project: Not available

## Checklist
- [x] I have read and follow the CONTRIBUTING.md document.
- [x] There are no other issues similar to this one.
- [x] The issue title and template are correctly filled.

Start by locating the Sass definitions of `$global-font-size` and `$header-styles`, then reproduce the issue with `$global-font-size` set to 125% and the supplied header settings. Trace how the header line-height is computed and verify that the resulting computed style matches the configured 48px value.

Written by the indexing model from the issue text.