diff --git a/_layouts/card_styles.css b/_layouts/card_styles.css
new file mode 100644
index 0000000..03d291e
--- /dev/null
+++ b/_layouts/card_styles.css
@@ -0,0 +1,54 @@
+/* card_styles.css */
+.card {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 10px;
+  margin: 10px;
+  width: 200px;
+  height: 300px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card h3 {
+  margin: 0;
+  font-size: 18px;
+  text-align: center;
+  color: #333;
+}
+
+.card p {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+}
+
+/* Card back style */
+.card.back {
+  background-color: #f0f0f0;
+  position: relative;
+  overflow: hidden;
+}
+
+.card.back::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(to bottom right, #ccc 25%, #fff 25%);
+  background-size: 20px 20px;
+}
+
+.card.back::after {
+  content: 'CARD BACK';
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  font-size: 12px;
+  color: #999;
+}