fix: add SASS div method fallback

src/sass/lib/functions.scss

@@ -1,7 +1,29 @@
-// ==========================================================================
-// Useful functions
-// ==========================================================================
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:list';
 
 @function to-percentage($input) {
   @return $input * 1%;
 }
+
+// Private polyfill for the `math.div` function from Sass to be used until we can update the
+// minimum required Sass version to 1.34.0 or above.
+// TODO: replace with `math.div` eventually.
+@function div($a, $b) {
+  @if (meta.function-exists('div', 'math')) {
+    @return math.div($a, $b);
+  } @else {
+    @return $a / $b;
+  }
+}
+
+// Private polyfill for the `list.slash` function from Sass to be used until we can update the
+// minimum required Sass version to 1.34.0 or above.
+// TODO: replace with `list.slash` eventually.
+@function slash($a, $b) {
+  @if (meta.function-exists('slash', 'list')) {
+    @return list.slash($a, $b);
+  } @else {
+    @return #{$a}#{' / '}#{$b};
+  }
+}

src/sass/types/video.scss

@@ -21,11 +21,10 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: 100%;
 }
 
 // Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: (math.div(100, 16) * 9);
+$embed-padding: (div(100, 16) * 9);
 
 .plyr__video-embed,
 .plyr__video-wrapper--fixed-ratio {
@@ -51,7 +50,7 @@ $embed-padding: (math.div(100, 16) * 9);
 // For Vimeo, if the full custom UI is supported
 .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
   $height: 240;
-  $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50)));
+  $offset: to-percentage(div($height - $embed-padding, div($height, 50)));
   padding-bottom: to-percentage($height);
   position: relative;
   transform: translateY(-$offset);