diff --git a/src/index.pcss b/src/index.pcss
index e69de29..5eb8589 100644
--- a/src/index.pcss
+++ b/src/index.pcss
@@ -0,0 +1,189 @@
+:root {
+  background: green;
+  font-family: Montserrat, sans-serif;
+  font-weight: 600;
+}
+
+.deck {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  width: 125px;
+  height: 200px;
+  background: white;
+  border-radius: 10px;
+  padding: 16px 8px;
+  margin: 5px;
+
+  font-size: 52px;
+}
+
+[data-suit="♥"],
+[data-suit="♦"] {
+  color: red;
+}
+
+/* Cards */
+[data-card="1"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 92px;
+}
+
+[data-card="2"],
+[data-card="3"] {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+[data-card="4"] {
+  display: grid;
+  grid-template-rows: 50% 50%;
+  grid-template-columns: 50% 50%;
+  justify-items: center;
+  align-items: center;
+}
+
+[data-card="5"] {
+  display: grid;
+  grid-template-areas: "a . b" ". c ." "d . e";
+  justify-items: center;
+  align-items: center;
+
+  & .item:nth-child(1) { grid-area: a; }
+  & .item:nth-child(2) { grid-area: b; }
+  & .item:nth-child(3) { grid-area: c; }
+  & .item:nth-child(4) { grid-area: d; }
+  & .item:nth-child(5) { grid-area: e; }
+}
+
+[data-card="6"],
+[data-card="7"],
+[data-card="8"] {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  justify-items: center;
+  align-items: center;
+}
+
+[data-card="7"],
+[data-card="8"] {
+  position: relative;
+
+  & .item:nth-child(1) {
+    position: absolute;
+    top: 20%;
+  }
+}
+
+[data-card="8"] {
+  & .item:nth-child(8) {
+    position: absolute;
+    bottom: 20%;
+  }
+}
+
+[data-card="9"],
+[data-card="10"] {
+  display: grid;
+  grid-template-rows: repeat(4, 25%);
+  grid-template-columns: 50% 50%;
+  justify-items: center;
+  align-items: center;
+  position: relative;
+
+  & .item:nth-child(1) {
+    position: absolute;
+  }
+}
+
+[data-card="10"] {
+  position: relative;
+
+  & .item:nth-child(1) {
+    position: absolute;
+    top: 15%;
+  }
+
+  & .item:nth-child(10) {
+    position: absolute;
+    bottom: 15%;
+  }
+}
+
+/* Mirror */
+[data-card="2"] .item:nth-child(n+2),
+[data-card="3"] .item:nth-child(n+3),
+[data-card="4"] .item:nth-child(n+3),
+[data-card="5"] .item:nth-child(n+4),
+[data-card="6"] .item:nth-child(n+5),
+[data-card="7"] .item:nth-child(n+6),
+[data-card="8"] .item:nth-child(n+6),
+[data-card="9"] .item:nth-child(n+6),
+[data-card="10"] .item:nth-child(n+6) {
+  transform: translateY(8px) scaleY(-1);
+}
+
+/* Royal */
+[data-card="J"],
+[data-card="Q"],
+[data-card="K"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & .item {
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 30px 12px;
+  }
+}
+
+/* Thumbs */
+[data-card] {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: attr(data-card) attr(data-suit);
+    font-size: 17px;
+    position: absolute;
+  }
+
+  &::before {
+    top: 4px;
+    left: 4px;
+  }
+
+  &::after {
+    bottom: 4px;
+    right: 4px;
+  }
+}
+
+/* Responsive cards */
+@media screen and (max-width: 800px) {
+  .card::after,
+  .item {
+    display: none;
+  }
+
+  .card {
+    width: 38px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card::before {
+    position: static;
+    font-size: 24px;
+  }
+}
diff --git a/src/index.pug b/src/index.pug
index 5dd43c3..727da54 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -7,4 +7,13 @@ html(lang="en")
     title CSS Grid Cards
     link(rel="stylesheet", href="./index.pcss")
     script(src="./index.js")
-  body
\ No newline at end of file
+  body
+    .deck
+      for s in ['♠','♥','♦','♣']
+        for c in [1,2,3,4,5,6,7,8,9,10]
+          .card(data-card=`${c}`, data-suit=`${s}`)
+            for i in [...Array(c).keys()]
+              span.item= s
+        for c in ['J','Q','K']
+          .card(data-card=`${c}`, data-suit=`${s}`)
+            span.item= c+s
\ No newline at end of file