Move ratio helper to utility API with aspect-ratio property

scss/_helpers.scss

@@ -3,7 +3,6 @@
 @import "helpers/colored-links";
 @import "helpers/focus-ring";
 @import "helpers/icon-link";
-@import "helpers/ratio";
 @import "helpers/position";
 @import "helpers/stacks";
 @import "helpers/visually-hidden";

scss/_utilities.scss

@@ -11,6 +11,13 @@ $utilities: map-merge(
       values: baseline top middle bottom text-bottom text-top
     ),
     // scss-docs-end utils-vertical-align
+    // scss-docs-start utils-aspect-ratio
+    "aspect-ratio": (
+      property: aspect-ratio,
+      class: ratio,
+      values: $aspect-ratios
+    ),
+    // scss-docs-end utils-aspect-ratio
     // scss-docs-start utils-float
     "float": (
       responsive: true,

scss/_variables.scss

@@ -586,16 +586,15 @@ $transition-collapse:         height .35s ease !default;
 $transition-collapse-width:   width .35s ease !default;
 // scss-docs-end collapse-transition
 
-// stylelint-disable function-disallowed-list
 // scss-docs-start aspect-ratios
 $aspect-ratios: (
-  "1x1": 100%,
-  "4x3": calc(3 / 4 * 100%),
-  "16x9": calc(9 / 16 * 100%),
-  "21x9": calc(9 / 21 * 100%)
+  "auto": auto,
+  "4x3": 4 / 3,
+  "1x1": 1 / 1,
+  "16x9": 16 / 9,
+  "21x9": 21 / 9
 ) !default;
 // scss-docs-end aspect-ratios
-// stylelint-enable function-disallowed-list
 
 // Typography
 //

scss/helpers/_ratio.scss

@@ -1,26 +0,0 @@
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.ratio {
-  position: relative;
-  width: 100%;
-
-  &::before {
-    display: block;
-    padding-top: var(--#{$prefix}aspect-ratio);
-    content: "";
-  }
-
-  > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@each $key, $ratio in $aspect-ratios {
-  .ratio-#{$key} {
-    --#{$prefix}aspect-ratio: #{$ratio};
-  }
-}