diff --git a/.gitignore b/.gitignore
index 6416b62..ad6c8e0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 node_modules
 
-# Don't commit this for libraries :)
+# Don't commit these for libraries :)
 yarn.lock
 package-lock.json
+
+/test/output
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 779fadb..125aa5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,34 @@
+## [v0.3.0.rc.1]
+
+> Unreleased
+
+v0.3.0 is an almost-full rewrite. It now supports more PostCSS setups. Use it as CSS modules, functional selectors (`@extend`), or custom property sets (`@apply`).
+
+- **Breaking change:** The filenames have been changed. Since responsive-modular-scale now comes in 3 flavors, you'll need to specify the variant you want. The old default is available as `modularscale.apply.css`.
+
+  ```css
+  /* Before (v0.2.0) */
+  @import 'responsive-modular-scale.css';
+
+  /* After (v0.3.0) */
+  @import 'responsive-modular-scale.css/defaults.css';
+  @import 'responsive-modular-scale.css/modularscale.apply.css';
+  ```
+
+- **Breaking change:** The classnames have been changed. `--font-size-X` is now `--ms-font-size-X` to prevent potential name clashes.
+
+  ```css
+  /* Before (v0.2.0) */
+  @apply --font-size-2;
+
+  /* After (v0.3.0) */
+  @apply --ms-font-size-2;
+  ```
+
+- **New:** Responsive-modular-scale is now available as a CSS module with `modularscale.module.css`. See [README.md](./README.md) for info.
+
+- **New:** Responsive-modular-scale now works as functional selectors (aka, `@extend`) with `modularscale.extend.css`. See [README.md](./README.md) for info.
+
 ## [v0.2.0]
 
 > Jan 17, 2019
diff --git a/README.md b/README.md
index 6f2ca52..c6eefb0 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@ This implements a basic [Modular Scale](http://www.modularscale.com/) system usi
 
 [postcss-cssnext]: https://www.npmjs.com/package/postcss-cssnext
 [postcss-import]: https://www.npmjs.com/package/postcss-import
+[postcss-custom-media]: https://yarnpkg.com/en/package/postcss-custom-media
+[postcss-custom-properties]: https://yarnpkg.com/en/package/postcss-custom-properties
+[postcss-preset-env]: https://github.com/csstools/postcss-preset-env
 
 ## Installation
 
@@ -19,12 +22,40 @@ npm install --save --save-exact responsive-modular-scale.css
 
 ## Usage
 
-Simply import it, assuming you're using [postcss-import] and [postcss-cssnext].
+`responsive-modular-scale.css` can be used in 3 different ways:
+
+### Functional selectors (`postcss-extend-rule`)
+
+See [§ Usage as functional selectors](#usage-as-functional-selectors).
+
+```css
+.title {
+  @extend %ms-font-size-2;
+}
+```
+
+### Property sets (`postcss-apply`)
+
+See [§ Usage as property sets](#usage-as-property-sets).
+
+```css
+.title {
+  @apply --ms-font-size-2;
+}
+```
+
+### CSS modules
+
+See [§ Usage as a CSS module](#usage-as-a-css-module).
 
 ```css
-@import 'responsive-modular-scale.css';
+.title {
+  composes: msFontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
+}
 ```
 
+## How it works
+
 To use it, use any of the provided `--font-size-#` custom property sets:
 
 ```css
@@ -35,35 +66,34 @@ div {
 
 This applies a `font-size: 2.0736rem` declaration for desktops—the default ratio is 1.2, so that's `1rem * 1.2 ^ 4`. For mobiles and tablets, it will use a different ratio (1.15 and 1.17 by default).
 
+<details>
+<summary><em>View sample output</em></summary>
+
 ```css
-div { font-size: 1.74901rem; }
+div {
+  font-size: 1.74901rem;
+}
 
 @media (min-width: 481px) {
-  div { font-size: 1.87389rem; }
+  div {
+    font-size: 1.87389rem;
+  }
 }
 
 @media (min-width: 769px) {
-  div { font-size: 2.0736rem; }
+  div {
+    font-size: 2.0736rem;
+  }
 }
 ```
 
-It gives you the following custom property sets:
-
- - `@apply --font-size--1` (negative 1)
- - `@apply --font-size-0` (applies to base font size)
- - `@apply --font-size-1`
- - `@apply --font-size-2`
- - ... `@apply --font-size-20`
+</details>
 
+## Configuring settings
 
-## Configuration
-
-It's recommended you include this in a "common" file included in most of your project's files; usually, that's something like `variables.css`. You can change these ratios and breakpoints like so:
+Set up a `variables.css` with your configuration. Consider placing this wherever you put your common variables (eg, color palettes and font names). See: [`defaults.css`](./defaults.css).
 
 ```css
-/* variables.css */
-@import 'responsive-modular-scale.css';
-
 :root {
   --ms-ratio-sm: 1.15;
   --ms-ratio-md: 1.17;
@@ -78,19 +108,152 @@ It's recommended you include this in a "common" file included in most of your pr
 @custom-media --ms-viewport-lg (width > 768px);
 ```
 
+## Usage as functional selectors
+
+To use this as functional selectors (ie, `@extend`), you'll need these PostCSS plugins:
+
+- [**postcss-prepend-imports**](postcss-prepend-imports)
+- [**postcss-extend-rule**](postcss-extend-rule)
+- [**postcss-preset-env**](postcss-preset-env)
+
+Configure PostCSS to load these plugins and import your variables. Here's an example config:
+
+```js
+/* postcss.config.js */
+module.exports = ctx => {
+  return {
+    plugins: [
+      // ...
+      require('postcss-prepend-imports')({
+        files: [
+          require.resolve(
+            'responsive-modular-scale.css/responsive-modular-scale.css'
+          )
+        ]
+      }),
+      require('postcss-preset-env')({
+        importFrom: [require.resolve('./your/path/to/variables.css')],
+        insertBefore: {
+          'all-property': [require('postcss-extend-rule')()]
+        }
+      })
+      // ...
+    ]
+  }
+}
+```
+
+You'll then be able to use them with `@extend` in your CSS.
+
 ```css
-/* your-other-styles.css */
-@import './variables.css';
+.title {
+  @extend %ms-font-size-2;
+}
+```
 
-body {
-  @apply --font-size-0;
+These selectors will become available:
+
+- `@extend %ms-font-size--1` (negative 1)
+- `@extend %ms-font-size-0` (applies the base font size)
+- `@extend %ms-font-size-1`
+- `@extend %ms-font-size-2`
+- ...
+- `@extend %ms-font-size-20`
+
+## Usage as property sets
+
+You can also apply modular scale font sizes using CSS property sets (aka, `@apply`). You'll need these PostCSS plugins:
+
+- [**postcss-prepend-imports**](postcss-prepend-imports)
+- [**postcss-apply**](postcss-apply)
+- [**postcss-preset-env**](postcss-preset-env)
+
+Configure PostCSS to load these plugins and import your variables. Here's an example config:
+
+```js
+/* postcss.config.js */
+module.exports = ctx => {
+  return {
+    plugins: [
+      // ...
+      require('postcss-prepend-imports')({
+        files: [
+          require.resolve(
+            'responsive-modular-scale.css/responsive-modular-scale.css'
+          )
+        ]
+      }),
+      require('postcss-apply')(),
+      require('postcss-preset-env')({
+        importFrom: [require.resolve('./your/path/to/variables.css')]
+      })
+      // ...
+    ]
+  }
 }
+```
 
-div {
-  @apply --font-size-4;
+You'll then be able to use them with `@apply` in your CSS.
+
+```css
+.title {
+  @apply --ms-font-size-2;
 }
 ```
 
+These property sets will become available:
+
+- `@apply --font-size--1` (negative 1)
+- `@apply --font-size-0` (applies the base font size)
+- `@apply --font-size-1`
+- `@apply --font-size-2`
+- ...
+- `@apply --font-size-20`
+
+## Usage as a CSS module
+
+:warning: `Experimental` - You can apply modular scale font sizes using CSS modules.
+
+To use this as functional selectors (ie, `@extend`), you'll need these PostCSS plugins:
+
+- [**postcss-preset-env**](postcss-preset-env)
+
+Configure PostCSS to load these plugins and import your variables. Here's an example config:
+
+```js
+/* postcss.config.js */
+module.exports = ctx => {
+  return {
+    plugins: [
+      // ...
+      require('postcss-preset-env')({
+        importFrom: [require.resolve('./your/path/to/variables.css')]
+      })
+      // ...
+    ]
+  }
+}
+```
+
+You'll then be able to use them with `composes` in your CSS.
+
+```css
+.myButton {
+  composes: msFontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
+}
+```
+
+These CSS classes are available:
+
+- `msFontSizeMinus1` (negative 1)
+- `msFontSize0` (applies the base font size)
+- `msFontSize1`
+- `msFontSize2`
+- ...
+- `msFontSize20`
+
+Learn more about the `composes:` property from the [CSS modules documentation](https://github.com/css-modules/css-modules#composition).
+
 ## Prior art
 
 - [postcss-modular-scale](https://www.npmjs.com/package/postcss-modular-scale) is a PostCSS plugin. However, it doesn't support responsive ratios, and the syntax is non-standard CSS.
@@ -112,5 +275,9 @@ Authored and maintained by Rico Sta. Cruz with help from contributors ([list][co
 > GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;
 > Twitter [@rstacruz](https://twitter.com/rstacruz)
 
-[MIT]: LICENSE.md
+[mit]: LICENSE.md
 [contributors]: http://github.com/rstacruz/responsive-modular-scale.css/contributors
+[css-modules]: https://github.com/css-modules/css-modules
+[postcss-apply]: https://yarnpkg.com/en/package/postcss-apply
+[postcss-extend-rule]: https://github.com/csstools/postcss-extend-rule
+[postcss-prepend-imports]: https://www.npmjs.com/package/postcss-prepend-imports
diff --git a/defaults.css b/defaults.css
new file mode 100644
index 0000000..b5326bb
--- /dev/null
+++ b/defaults.css
@@ -0,0 +1,12 @@
+@custom-media --ms-viewport-md (width > 480px);
+@custom-media --ms-viewport-lg (width > 768px);
+
+:root {
+  --ms-ratio-sm: 1.15;
+  --ms-ratio-md: 1.17;
+  --ms-ratio-lg: 1.2;
+  --ms-base: 1rem;
+  --ms-base-sm: var(--ms-base);
+  --ms-base-md: var(--ms-base-sm);
+  --ms-base-lg: var(--ms-base-md);
+}
diff --git a/modularscale.apply.css b/modularscale.apply.css
new file mode 100644
index 0000000..d6a2e17
--- /dev/null
+++ b/modularscale.apply.css
@@ -0,0 +1,524 @@
+:root {
+  --ms-font-size--1: {
+    font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
+    @media (--ms-viewport-md) {
+      font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg));
+    }
+  }
+
+  --ms-font-size-0: {
+    font-size: var(--ms-base-sm);
+    @media (--ms-viewport-md) {
+      font-size: var(--ms-base-md);
+    }
+    @media (--ms-viewport-lg) {
+      font-size: var(--ms-base-lg);
+    }
+  }
+
+  --ms-font-size-1: {
+    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
+    @media (--ms-viewport-md) {
+      font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg));
+    }
+  }
+
+  --ms-font-size-2: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-3: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-4: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-5: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-6: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-7: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-8: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-9: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-10: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-11: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-12: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-13: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-14: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-15: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-16: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-17: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-18: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-19: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+
+  --ms-font-size-20: {
+    font-size: calc(
+      var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+        var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+    );
+    @media (--ms-viewport-md) {
+      font-size: calc(
+        var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+          var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+      );
+    }
+    @media (--ms-viewport-lg) {
+      font-size: calc(
+        var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+          var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+      );
+    }
+  }
+}
diff --git a/modularscale.extend.css b/modularscale.extend.css
new file mode 100644
index 0000000..e699a50
--- /dev/null
+++ b/modularscale.extend.css
@@ -0,0 +1,520 @@
+%ms-font-size--1 {
+  font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg));
+  }
+}
+
+%ms-font-size-0 {
+  font-size: var(--ms-base-sm);
+  @media (--ms-viewport-md) {
+    font-size: var(--ms-base-md);
+  }
+  @media (--ms-viewport-lg) {
+    font-size: var(--ms-base-lg);
+  }
+}
+
+%ms-font-size-1 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg));
+  }
+}
+
+%ms-font-size-2 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-3 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-4 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-5 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-6 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-7 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-8 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-9 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-10 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-11 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-12 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-13 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-14 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-15 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-16 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-17 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-18 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-19 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+%ms-font-size-20 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
diff --git a/modularscale.module.css b/modularscale.module.css
new file mode 100644
index 0000000..3c5df83
--- /dev/null
+++ b/modularscale.module.css
@@ -0,0 +1,520 @@
+.msFontSizeMinus1 {
+  font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) / var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg));
+  }
+}
+
+.msFontSize0 {
+  font-size: var(--ms-base-sm);
+  @media (--ms-viewport-md) {
+    font-size: var(--ms-base-md);
+  }
+  @media (--ms-viewport-lg) {
+    font-size: var(--ms-base-lg);
+  }
+}
+
+.msFontSize1 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(var(--ms-base-md) * var(--ms-ratio-md));
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg));
+  }
+}
+
+.msFontSize2 {
+  font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize3 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize4 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize5 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize6 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize7 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize8 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize9 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize10 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize11 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize12 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize13 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize14 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize15 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize16 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize17 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize18 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize19 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
+
+.msFontSize20 {
+  font-size: calc(
+    var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) *
+      var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm)
+  );
+  @media (--ms-viewport-md) {
+    font-size: calc(
+      var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) *
+        var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)
+    );
+  }
+  @media (--ms-viewport-lg) {
+    font-size: calc(
+      var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) *
+        var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)
+    );
+  }
+}
diff --git a/package.json b/package.json
index 1f28fd4..723c145 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "responsive-modular-scale.css",
   "description": "Responsive typography using CSS variables",
-  "version": "0.2.0",
+  "version": "0.3.0-rc.1",
   "author": "Rico Sta. Cruz <rico@ricostacruz.com>",
   "keywords": [
     "css",
@@ -13,7 +13,7 @@
   "main": "responsive-modular-scale.css",
   "style": "responsive-modular-scale.css",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "bash test/test.sh"
   },
   "repository": {
     "type": "git",
@@ -22,5 +22,11 @@
   "bugs": {
     "url": "https://github.com/rstacruz/responsive-modular-scale.css/issues"
   },
-  "homepage": "https://github.com/rstacruz/responsive-modular-scale.css#readme"
+  "homepage": "https://github.com/rstacruz/responsive-modular-scale.css#readme",
+  "devDependencies": {
+    "postcss-apply": "^0.12.0",
+    "postcss-cli": "^6.1.2",
+    "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.6.0"
+  }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..3cd534d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import')(),
+    require('postcss-apply')(),
+    require('postcss-preset-env')({
+      stage: 0,
+
+      // Don't preserve CSS variables
+      preserve: false
+    })
+  ]
+}
diff --git a/responsive-modular-scale.css b/responsive-modular-scale.css
deleted file mode 100644
index 0b0f9a1..0000000
--- a/responsive-modular-scale.css
+++ /dev/null
@@ -1,144 +0,0 @@
-@custom-media --ms-viewport-md (width > 480px);
-@custom-media --ms-viewport-lg (width > 768px);
-
-:root {
-  --ms-ratio-sm: 1.15;
-  --ms-ratio-md: 1.17;
-  --ms-ratio-lg: 1.2;
-  --ms-base: 1rem;
-  --ms-base-sm: var(--ms-base);
-  --ms-base-md: var(--ms-base-sm);
-  --ms-base-lg: var(--ms-base-md);
-
-  --font-size--1: {
-    font-size: calc(var(--ms-base-sm) / var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) / var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) / var(--ms-ratio-lg)); }
-  }
-
-  --font-size-0: {
-    font-size: var(--ms-base-sm);
-    @media (--ms-viewport-md) { font-size: var(--ms-base-md); }
-    @media (--ms-viewport-lg) { font-size: var(--ms-base-lg); }
-  }
-
-  --font-size-1: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-2: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-3: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-4: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-5: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-6: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-7: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-8: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-9: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-10: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-11: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-12: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-13: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-14: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-15: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-16: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-17: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-18: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-19: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-
-  --font-size-20: {
-    font-size: calc(var(--ms-base-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm) * var(--ms-ratio-sm));
-    @media (--ms-viewport-md) { font-size: calc(var(--ms-base-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md) * var(--ms-ratio-md)); }
-    @media (--ms-viewport-lg) { font-size: calc(var(--ms-base-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg) * var(--ms-ratio-lg)); }
-  }
-}
diff --git a/test/fixtures/css_modules.css b/test/fixtures/css_modules.css
new file mode 100644
index 0000000..60fe85e
--- /dev/null
+++ b/test/fixtures/css_modules.css
@@ -0,0 +1,2 @@
+@import '../../defaults.css';
+@import '../../modularscale.module.css';
diff --git a/test/fixtures/test.css b/test/fixtures/test.css
new file mode 100644
index 0000000..274355b
--- /dev/null
+++ b/test/fixtures/test.css
@@ -0,0 +1,6 @@
+@import '../../defaults.css';
+@import '../../modularscale.apply.css';
+
+#one {
+  @apply --ms-font-size-1;
+}
diff --git a/test/test.sh b/test/test.sh
new file mode 100644
index 0000000..35b1ad5
--- /dev/null
+++ b/test/test.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+set -eou pipefail
+
+_grep () {
+	local needle="$1"
+	local haystack="$2"
+	if grep -F "$needle" "$haystack" >/dev/null; then
+		printf "  ✓ [%20s] %s\n" "$haystack" "$needle"
+	else
+		printf "  ✗ [%20s] %s\n" "$haystack" "$needle"
+		exit 1
+	fi
+}
+
+(
+	echo ""
+	echo -e "\033[34mCompiling test fixtures using PostCSS:\033[0m"
+	./node_modules/.bin/postcss test/fixtures --dir test/output
+	echo "  ✓ ok"
+
+	echo ""
+	echo -e "\033[34mChecking output:\033[0m"
+	_grep "font-size: calc(" test/output/test.css
+	_grep "1rem * 1.17);" test/output/test.css
+	_grep "1rem * 1.2);"  test/output/test.css
+	_grep "1rem * 1.15);" test/output/test.css
+	_grep ".msFontSize1 {"  test/output/css_modules.css
+	_grep ".msFontSize2 {"  test/output/css_modules.css
+	_grep ".msFontSize10 {" test/output/css_modules.css
+) || (
+	echo ""
+	echo "Failure encountered, oops!"
+	echo "Check the logs above and inspect the output in /test/output/."
+	exit 1
+)