Create aspect-ratio SCSS mixin polyfill

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1691523058315
+    "version": 1692002413473
 }

assets/styles/tools/_mixins.scss

@@ -193,3 +193,34 @@
     display: $display $important;
     visibility: visible  $important;
 }
+
+// Aspect-ratio polyfill
+//
+// The element will be accessible from screen readers and visible in the document flow.
+//
+// @param  {Number} $ratio      [19/6]  - The ratio of the element.
+// @param  {Number} $width      [100%]  - The width of element.
+// @param  {Boolean} $children  [false] - Whether the element contains children.
+// @output Properties for maintaining aspect-ratio
+
+@mixin aspect-ratio($ratio: math.div(16, 9), $width: 100%, $children: false) {
+
+    @supports not (aspect-ratio: 1) {
+        aspect-ratio: $ratio;
+    }
+
+    @supports (aspect-ratio: 1) {
+        height: 0;
+        padding-top: calc(#{$width} * #{math.div(1, $ratio)});
+
+        @if ($children == true) {
+            position: relative;
+
+            > * {
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        }
+    }
+}