Slimmed cards down, and made their layout relative

src/App.js

@@ -11,9 +11,9 @@ function Card(data) {
       <img src={data.CardImg !== undefined ? data.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
       <div class="container">
         <p>{data.CardDesc}</p>
-        <p style={{position: "absolute", bottom: -8, left: 8}}>Mana: {data.ManaCost}</p>
-        <p style={{position: "absolute", bottom: -8, left: 125}}>Power: {data.Power} </p>
-        <p style={{position: "absolute", bottom: -8, right: 8}}>Toughness: {data.Toughness}</p>
+        <p style={{position: "absolute", bottom: -8, left: "2%"}}>Mana: {data.ManaCost}</p>
+        <p style={{position: "absolute", bottom: -8, left: "35%"}}>Power: {data.Power} </p>
+        <p style={{position: "absolute", bottom: -8, right: "2%"}}>Toughness: {data.Toughness}</p>
       </div>
     </div>
   )

src/index.css

@@ -17,8 +17,8 @@ code {
   border-radius: 3%;
   transition: 0.3s;
   position: relative;
-  width: 300px;
-  height: 450px;
+  width: 250px;
+  height: 420px;
   padding: 10px;
   background-color: #a05236a6;
   color: #FFFFFF;