Update events layout

- Add `cover_image_caption` (which uses figcaption under the hood)
- Change event details from a list to a table (more semantic and looks
  better)

assets/css/events.css

@@ -63,6 +63,11 @@
 	max-width: 640px;
 }
 
+.events .events-fulllist .card figure img {
+	margin-bottom: 0;
+	max-width: none;
+}
+
 .events .events-fulllist .events-empty {
 	background-color: var(--background-color);
 	border: none;
@@ -72,10 +77,24 @@
 	box-shadow: none;
 }
 
-.event-details > li p {
+.event-details {
+	border-spacing: 0.25em;
+}
+
+.event-details p {
 	display: inline;
-	margin-left: 0.3em;
-	margin-right: 0.3em;
+}
+
+.event-details p::after {
+	content: " ";
+}
+
+.event-details p:last-child::after {
+	content: "";
+}
+
+.event-details tr th {
+	text-align: left;
 }
 
 @media screen and (max-width: 900px) {
@@ -93,3 +112,25 @@
 		padding-left: 2rem;
 	}
 }
+
+figure {
+	margin: 0;
+	border-radius: 4px;
+	background-color: var(--base-color);
+	margin-inline-start: auto;
+}
+
+figure figcaption {
+	padding: 1em;
+	opacity: 0.8;
+	font-size: 80%;
+	font-style: italic;
+}
+
+figure figcaption:empty {
+	display: none;
+}
+
+figure img {
+	display: block;
+}