Updates responsive embeds with new class names and CSS variables

- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide

site/assets/scss/_component-examples.scss

@@ -164,6 +164,19 @@
     margin-top: .5rem;
     margin-bottom: .5rem;
   }
+
+  // Responsive embed helpers
+  .embed-responsive {
+    display: inline-block;
+    color: $gray-600;
+    background-color: $gray-100;
+    border: $border-width solid $border-color;
+  }
+  .embed-responsive-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .bd-example-modal {