Added name changes to game card containers to make thei rpurposes more clear

ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css

@@ -1,10 +1,11 @@
 #game-card {
     display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
     border: 1px solid #ccc;
-    padding: 10px;
-    margin: 10px 10px; /* Remove horizontal margin */
+    border-radius: 4px;
+    padding: 6px;
+    margin: 2.5px 2.5px; /* Remove horizontal margin */
     min-height: 100px;
-    min-width: 200px;
+    min-width: 150px;
     box-sizing: border-box;
 
     transition: transform 0.4s ease; /* Add transition for smooth effect */
@@ -21,13 +22,13 @@
     align-items: center;
 }
 
-.left-side {
+.card-team-container {
     flex: 70%;
     display: flex;
     flex-direction: column;
 }
 
-.right-side {
+.card-game-information-container {
     flex: 30%;
     display: flex;
     align-items: center;

ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs

@@ -2,7 +2,7 @@
     <div class="score-card-body">
 
         <!-- Left side (70%) -->
-        <div class="left-side">
+        <div class="card-team-container">
             <!-- Team 1 Name with Score -->
             <div class="team">
                 <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
@@ -18,7 +18,7 @@
         </div>
 
         <!-- Right side (30%) -->
-        <div class="right-side">
+        <div class="card-game-information-container">
             <!-- Time -->
             <div class="score" style="text-align: center;">
                 <p id="time">{{ minute }}</p>