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

1 files changed, 3 insertions, 3 deletions

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};
   }
 }