Refactor code to match current conventions

This is an update to Vellum such that the CSS is written in a way that follows our current standards and conventions.

Status: **Opened for visibility**
Reviewers: @kpeatt @ry5n 
JIRA: **CSOPS-846**

## Changes
* Set headings to standard capitilization
* Max of three `=` or `-` when underlining headings
* Fixed property orders to match our linting rules
* Repositioned line comments
* Corrected line comments to be written using the numbered notation
* Cleaned up unnecessary third level headings
* Removed any placeholder classes
* Added a few extra headings for clarity
* Tried to make the variable's introductory bullet list a bit more readable

I feel like we shouldn't be declaring classes in Vellum.

I suppose you could argue that these aren't "classes", but I feel like we use them like classes in a way. Maybe it's just my personal preference, but I like this pattern more:

```
// `/vellum`
h1 {
    @extend %c-heading-1;
}

// `/components`
.c-heading
%c-heading {
}
```