diff --git a/client/src/components/ui/WagtailImage.vue b/client/src/components/ui/WagtailImage.vue
index 815a527d..c830043c 100644
--- a/client/src/components/ui/WagtailImage.vue
+++ b/client/src/components/ui/WagtailImage.vue
@@ -94,8 +94,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped lang="scss">
-@import 'styles/helpers';
+<style scoped lang="postcss">
 
 .wagtail-image {
   overflow: hidden;
@@ -103,13 +102,13 @@ onBeforeUnmount(() => {
 
   &__background {
     max-height: 100%;
-    background-color: $color-silver-light;
+    background-color: var(--color-silver-light);
   }
 
   &__image {
     width: 100%;
     max-height: 100%;
-    object-fit: cover; // Ensures the image covers the allocated area without distorting aspect ratio
+    object-fit: cover; 
     object-position: center;
   }
 }
diff --git a/client/src/styles/css/variables.css b/client/src/styles/css/variables.css
index 241d9915..be10f618 100644
--- a/client/src/styles/css/variables.css
+++ b/client/src/styles/css/variables.css
@@ -13,6 +13,7 @@
 
   --color-white: #ffffff;
   --color-silver: #d0d0d0;
+  --color-silver-light: #f0f0f0;
   --color-silver-dark: #aaaaaa;
   --color-charcoal-dark: #333333;