style(Image): match new alignment selectors (#992)

| 🎫 Fix RM-11105, RM-11116 |
| :-----------------------------: |

## 🧰 Changes

- [x] update our image alignment rulesets to match the new MDX selectors

## 🧬 QA & Testing

Checkout the `style/image/match-new-alignment-selectors` branch, run
`start`, and open up [this example in the playground][local]. Try
switching the `<Image[align]>` prop from "left" to "center" to "right".
If it’s reflected correctly in the right-side render, this worked!
🎉

[local]:
http://localhost:9966/#/edited?edit=%3CImage+align%3D%22right%22+width%3D%2250%25+%22+src%3D%22https%3A%2F%2Fmedia.istockphoto.com%2Fid%2F589125884%2Fphoto%2Fman-eating-pizza-and-making-an-ok-gesture.jpg%3Fs%3D170667a%26w%3D0%26k%3D20%26c%3DcGTsJbWLAYyOjev9zFhWp6iYX-p39qsrvTEsF699NfI%3D%22+%2F%3E%0A%0ALorem+ipsum+odor+amet%2C+consectetuer+adipiscing+elit.+Blandit+morbi+fames+quisque+mattis+tellus+augue.+Torquent+conubia+enim+malesuada+sagittis+vivamus+penatibus+facilisis+odio.+Non+elementum+phasellus+inceptos+erat+ullamcorper+eros+dictum+ex+condimentum%3F+Nisi+porta+nullam+sodales+diam+risus+donec.+Porttitor+congue+malesuada+cubilia+adipiscing+vehicula.%0A%0ALorem+ipsum+odor+amet%2C+consectetuer+adipiscing+elit.+Blandit+morbi+fames+quisque+mattis+tellus+augue.+Torquent+conubia+enim+malesuada+sagittis+vivamus+penatibus+facilisis+odio.+Non+elementum+phasellus+inceptos+erat+ullamcorper+eros+dictum+ex+condimentum%3F+Nisi+porta+nullam+sodales+diam+risus+donec.+Porttitor+congue+malesuada+cubilia+adipiscing+vehicula.%0A%0ALorem+ipsum+odor+amet%2C+consectetuer+adipiscing+elit.+Blandit+morbi+fames+quisque+mattis+tellus+augue.+Torquent+conubia+enim+malesuada+sagittis+vivamus+penatibus+facilisis+odio.+Non+elementum+phasellus+inceptos+erat+ullamcorper+eros+dictum+ex+condimentum%3F+Nisi+porta+nullam+sodales+diam+risus+donec.+Porttitor+congue+malesuada+cubilia+adipiscing+vehicula.

components/Image/style.scss

@@ -28,15 +28,19 @@
     outline: none !important;
     vertical-align: middle;
 
+    &.img-align-right,
     &[align='right'],
     &[alt~='align-right'] {
       @extend %img-align-right;
     }
 
+    &.img-align-left,
     &[align='left'],
     &[alt~='align-left'] {
       @extend %img-align-left;
+
     }
+    &.img-align-center,
     &[align='middle'], // hack to fix Firefox; see: https://stackoverflow.com/a/45901819/1341949
     &[align='center'],
     &[alt~='align-center'] {
@@ -65,8 +69,10 @@
     }
   }
 
+  > .img,
   > img,
   figure > img {
+    display: block;
     @extend %img-align-center;
   }