Add card styles and some more information to fill them out

static/card.css

@@ -0,0 +1,46 @@
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  background: var(--color-primary);
+  aspect-ratio: 2 / 3;
+  max-width: 250px;
+  max-height: 380px;
+  padding: 10px;
+}
+
+.card .card-content {
+  flex-basis: 0.0001%;
+}
+.card .card-image {
+  flex-basis: 99.9999%;
+}
+
+.card:hover .card-content {
+  flex-basis: 50%;
+  padding-top: 10px;
+}
+.card:hover .card-image {
+  flex-basis: 50%;
+}
+
+.card-content {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: space-between;
+  transition: flex-basis 250ms ease-out;
+}
+
+.card-image {
+  transition: flex-basis 250ms ease-out;
+  flex-grow: 1;
+  flex-basis: 100%;
+  object-fit: cover;
+  display: flex;
+  overflow: hidden;
+  border-radius: 8px;
+}
+

static/style.css

@@ -122,7 +122,6 @@ button, .button {
 
   background: transparent;
   /* inherit font & color from ancestor */
-  color: inherit;
   font: inherit;
 
   /* Corrects font smoothing for webkit */
@@ -181,3 +180,28 @@ a:hover {
   background: var(--color-secondary);
   color: var(--color-primary);
 }
+
+.cluster {
+  display: flex;
+}
+.spacing\:between {
+  justify-content: space-between;
+}
+.align\:center {
+  align-items: center;
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.s1 {
+  gap: 10px;
+}
+
+.p1 {
+  padding: 10px;
+}