Mostly replace font-size($step) SASS mixin with equivalent CSS classes

[michaelchadwick]

Refs ilios/ilios#6608
Fixes ilios/ilios#6710

This is a biggie, and will be done in several passes:

1. "easy" fixes where the mixin does not mince words with another mixin, either under or alongside
2. "medium" fixes where the mixin targets an element that never shows up in a template (cruft?)
3. "hard" fixes where the mixin does mingle with another mixin, either under or alongside

I'm trying to keep commits generally within those boundaries so my journey can be properly followed along with.

[netlify]

✅ Deploy Preview for ilios-frontend ready!

Name	Link
🔨 Latest commit	07fbf18
🔍 Latest deploy log	https://app.netlify.com/projects/ilios-frontend/deploys/69458a4e463d18000851fb8e
😎 Deploy Preview	https://deploy-preview-8997--ilios-frontend.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[michaelchadwick]

The mixin has been extinguished, but the second-to-last commit, uh, commits a grievous error: simply adding the new shared class's attributes to a bunch of deeply-nested places that I couldn't yet figure out how to untangle.

[stopfstedt]

the remaining usage of these mixins.

stefan@nichtsnutz: ~/dev/projects/frontend on 6710-replace-font-size-sass-mixin[$]
$ grep -r '@include' packages --exclude-dir=dist --exclude-dir=node_modules | grep font-size
packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss:          @include m.font-size("large");
packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss:            @include m.font-size("medium");
packages/ilios-common/app/styles/ilios-common/shared/main-list-box-header-title.scss:  @include font-size.text-align-bottom;
packages/ilios-common/app/styles/ilios-common/mixins/course/header.scss:    @include font-size.text-align-bottom;
packages/ilios-common/app/styles/ilios-common/mixins/course/header.scss:      @include font-size.text-align-bottom;
packages/ilios-common/app/styles/ilios-common/mixins/ilios-heading.scss:  @include font-size.font-size("xxxl");
packages/ilios-common/app/styles/ilios-common/mixins/ilios-heading.scss:  @include font-size.font-size("xxl");
packages/ilios-common/app/styles/ilios-common/mixins/ilios-heading.scss:  @include font-size.font-size("xl");
packages/ilios-common/app/styles/ilios-common/mixins/ilios-heading.scss:  @include font-size.font-size("large");
packages/ilios-common/app/styles/ilios-common/mixins/ilios-heading.scss:  @include font-size.font-size("medium");
packages/ilios-common/app/styles/ilios-common/mixins/ilios-heading.scss:  @include font-size.font-size("base");
packages/ilios-common/app/styles/ilios-common/mixins/ilios-button.scss:  @include font-size.font-size("base");
packages/ilios-common/app/styles/ilios-common/mixins/ilios-select.scss:  @include font-size.font-size("base");
packages/frontend/app/styles/components/ilios-navigation.scss:        @include m.font-size("small");

stefan@nichtsnutz: ~/dev/projects/frontend on 6710-replace-font-size-sass-mixin[$]
$ grep -r '@include' packages --exclude-dir=dist --exclude-dir=node_modules | grep font-size | sed 's/:\(.*\)//' | sort -u                                                          
packages/frontend/app/styles/components/ilios-navigation.scss
packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss
packages/ilios-common/app/styles/ilios-common/mixins/course/header.scss
packages/ilios-common/app/styles/ilios-common/mixins/ilios-button.scss
packages/ilios-common/app/styles/ilios-common/mixins/ilios-heading.scss
packages/ilios-common/app/styles/ilios-common/mixins/ilios-select.scss
packages/ilios-common/app/styles/ilios-common/shared/main-list-box-header-title.scss

[stopfstedt]

couple of minor shifts, padding related i think, that the differ and Percy caught.
i'm ok with that.