diff --git a/client/package.json b/client/package.json
index b1f58464..de5a9a76 100644
--- a/client/package.json
+++ b/client/package.json
@@ -59,8 +59,8 @@
     "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-vue": "^7.17.0",
-    "node-sass": "^5.0.0",
     "prettier": "^2.3.2",
+    "sass": "^1.49.0",
     "sass-loader": "^10.1.1",
     "ts-node": "^9.1.1",
     "typescript": "^4.4.2",
diff --git a/client/src/assets/styles/vendor/_font-awesome.scss b/client/src/assets/styles/vendor/_font-awesome.scss
index 1ea360ba..a19b703d 100644
--- a/client/src/assets/styles/vendor/_font-awesome.scss
+++ b/client/src/assets/styles/vendor/_font-awesome.scss
@@ -1,5 +1,7 @@
 // Variables
 
+@use "sass:math";
+
 $fa-font-path:                "~@fortawesome/fontawesome-free/webfonts";
 $fa-font-size-base:    16px;
 $fa-font-display:      auto;
@@ -7,7 +9,7 @@ $fa-css-prefix:        fa;
 $fa-border-color:      #eee;
 $fa-inverse:           #fff;
 $fa-li-width:          2em;
-$fa-fw-width:          (20em / 16);
+$fa-fw-width:          math.div(20em, 16);
 $fa-primary-opacity:   1;
 $fa-secondary-opacity: .4;
 
diff --git a/client/src/components/video.vue b/client/src/components/video.vue
index 4a7a3fdc..164bc39e 100644
--- a/client/src/components/video.vue
+++ b/client/src/components/video.vue
@@ -124,7 +124,7 @@
       .player-container {
         position: relative;
         width: 100%;
-        max-width: 16 / 9 * 100vh;
+        max-width: calc(16 / 9 * 100vh);
 
         video {
           position: absolute;