Can't center grid columns in small/medium device-widths

I want to center a `.grid__col--m-2-of-3` column. But it looks like this selector:

```css
@media (max-width: $toast-breakpoint-medium) and (min-width: $toast-breakpoint-small) {
&[class*="#{$toast-grid-column-namespace}--m-"] {
display: inline-block;
margin-right: -.24em;
}
...
}
```
is overriding the `display:block; margin-right:auto;` of `.grid__col--centered`. Hence I can't center the column.

Inspector screenshot below:


Is this a bug or am I missing something? Why is the `display:inline-block` selector necessary? Surely these declarations are by default inherited from `.grid__col` anyhow?

Thanks

Inspect the `.grid__col--centered` rule alongside the small/medium `@media` selector for `[class*="#{$toast-grid-column-namespace}--m-"]`. Reproduce the cascade in the affected device-width range and verify that a centered `.grid__col--m-2-of-3` remains centered without breaking the responsive grid alignment.

Written by the indexing model from the issue text.