From b01928ead3dfa1d23c5b974c14cea77c405f4b3e Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 4 Jun 2025 12:18:42 +0800
Subject: [PATCH] Refactor Card component to use variables from CSS

- Removed inline styles for colors and radius
- Imported `variables.sass` and used `$textColor` and `$borderRadius`
- Adjusted imports and formatting
---
 src/components/Card/Card.sass | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Card/Card.sass b/src/components/Card/Card.sass
index d603c12..e0438fa 100644
--- a/src/components/Card/Card.sass
+++ b/src/components/Card/Card.sass
@@ -1,23 +1,21 @@
 @use '/src/assets/css/viewport.sass' as view
+@use '/src/assets/css/variables.sass' as vars
 @use 'sass:color'
 
 $borderColor: rgba(72, 100, 114, 0.463)
 $borderColorHover: rgba(88, 133, 135, 0.931)
 $backgroundColor: #1e1e1e
-$borderRadius: 8px
 $boxShadow: rgba(72, 100, 114, 0.463) 0px 4px 12px
-$textColor: #ffffff
 
 .card
   height: 10rem
-  // width: clamp(10rem, 25vw, 24rem)
   width: 24rem
   border: 2px solid $borderColor
   padding: 20px
   margin-bottom: 20px
   cursor: pointer
-  color: $textColor
-  border-radius: $borderRadius
+  color: vars.$textColor
+  border-radius: vars.$borderRadius
   transition: border-color 0.3s ease-out
 
   @media screen and (max-width: view.$tablet)