diff --git a/src/app/game-card/game-card.component.css b/src/app/game-card/game-card.component.css
index 2d900d1..da33d18 100644
--- a/src/app/game-card/game-card.component.css
+++ b/src/app/game-card/game-card.component.css
@@ -3,7 +3,7 @@
 }
 
 .game-card {
-  width: 420px;
+  width: var(--card-width);
 }
 
 .full-width-field {
diff --git a/src/app/match-results/match-results.component.css b/src/app/match-results/match-results.component.css
index 549374b..8ff23e9 100644
--- a/src/app/match-results/match-results.component.css
+++ b/src/app/match-results/match-results.component.css
@@ -3,7 +3,7 @@
 }
 
 .match-results {
-  width: 420px;
+  width: var(--card-width);
 }
 
 .match-results-text {
diff --git a/src/app/score-card/score-card.component.css b/src/app/score-card/score-card.component.css
index c236c5f..c6cb8e6 100644
--- a/src/app/score-card/score-card.component.css
+++ b/src/app/score-card/score-card.component.css
@@ -4,7 +4,7 @@
 
 .match-score {
   margin: 1rem 0;
-  width: 420px;
+  width: var(--card-width);
 }
 
 .score-box {
diff --git a/src/app/score-card/score-card.component.ts b/src/app/score-card/score-card.component.ts
index 86b7b68..d32b032 100644
--- a/src/app/score-card/score-card.component.ts
+++ b/src/app/score-card/score-card.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { GameFacade } from '../store/game';
 
 @Component({
diff --git a/src/styles.css b/src/styles.css
index 7e7239a..e702464 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 
+:root {
+  --card-width: 420px;
+}
+
+
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }