2 files changed, 32 insertions, 5 deletions
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 93e8102..3d66067 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -1,11 +1,12 @@
 import React from 'react'
+import styles from './Card.module.css'
 
-const Card = (title, image) => {
+const Card = ({ title, image }) => {
   return (
-    <>
-      <img src={image} alt="" />
-      <h2>{title}</h2>
-    </>
+    <div className={styles.card}>
+      <img className={styles.card__image} src={image} alt="" />
+      <h2 className={styles.card__title}>{title}</h2>
+    </div>
   )
 }
 
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index e69de29..ff09072 100644
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -0,0 +1,26 @@
+@import '../../styles/GlobalVariables.css';
+
+.card {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 3px solid var(--color-black);
+  border-radius: 10px;
+  margin: 30px;
+  transition: 0.2s all;
+  cursor: pointer;
+  color: var(--color-black);
+  text-decoration-line: none;
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+}
+
+.card__title {
+  margin: 15px 0px;
+}