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

scss/_variables.scss

@@ -378,22 +378,10 @@ $transition-collapse:         height .35s ease !default;
 
 // scss-docs-start embed-responsive-aspect-ratios
 $embed-responsive-aspect-ratios: (
-  "21by9": (
-    x: 21,
-    y: 9
-  ),
-  "16by9": (
-    x: 16,
-    y: 9
-  ),
-  "4by3": (
-    x: 4,
-    y: 3
-  ),
-  "1by1": (
-    x: 1,
-    y: 1
-  )
+  "1x1": 100%,
+  "4x3": 75%,
+  "16x9": 56.25%,
+  "21x9": 42.857142%
 ) !default;
 // scss-docs-end embed-responsive-aspect-ratios
 

scss/helpers/_embed.scss

@@ -1,11 +1,13 @@
 // Credit: Nicolas Gallagher and SUIT CSS.
 
 .embed-responsive {
+
   position: relative;
   width: 100%;
 
   &::before {
     display: block;
+    padding-top: var(--aspect-ratio);
     content: "";
   }
 
@@ -24,8 +26,6 @@
 
 @each $key, $ratio in $embed-responsive-aspect-ratios {
   .embed-responsive-#{$key} {
-    &::before {
-      padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
-    }
+    --aspect-ratio: #{$ratio};
   }
 }