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

2 files changed, 7 insertions, 19 deletions

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8f47509d6..fa4ad19f1 100644
--- a/scss/_variables.scss
+++ b/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
 
diff --git a/scss/helpers/_embed.scss b/scss/helpers/_embed.scss
index 924fc0e6d..8dbb7487d 100644
--- a/scss/helpers/_embed.scss
+++ b/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};
   }
 }