Implemented phase 6 for the POC prototype in the Website service.

Services/Website/Resources/Static/css/trade.css

@@ -1066,3 +1066,79 @@ a.rows__row:hover {
     padding-top: var(--space-8);
   }
 }
+
+/* ==========================================================================
+   Collection and events
+   ========================================================================== */
+
+.tiles--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.collection__series,
+.events__event {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.collection__series:hover,
+.events__event:hover {
+  border-color: var(--ink);
+  color: var(--ink);
+}
+
+.collection__text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.collection__top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-2);
+  font-size: 15px;
+}
+
+.collection__complete {
+  color: var(--good);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.events__intro {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.events__event {
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: 14px;
+}
+
+.events__name {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 15px;
+}
+
+.events__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.listing__sold {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}