Improve metadata markup

css/content.css

@@ -6,6 +6,7 @@
 .content h6 {
   font-family: var(--heading-font-family);
   margin-bottom: var(--space-sm);
+  color: var(--color-dark-blue);
 }
 
 .content h1 {

css/excerpt.css

@@ -28,24 +28,23 @@
   }
 }
 
-.excerpt__title,
-.excerpt__subtitle {
+.excerpt__title {
   font-size: var(--size-heading-6);
 }
 
-.excerpt__subtitle {
-  margin-top: var(--space-sm);
-}
-
-.excerpt__metadata {
+.excerpt__list {
   color: var(--color-grey);
   font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
 }
 
+.excerpt__list-item {
+  display: inline-block;
+  margin-bottom: var(--space-xs);
+}
+
 .excerpt__icon,
 .excerpt__text {
-  display: inline-block;
   vertical-align: middle;
 }
 
@@ -54,14 +53,39 @@
 }
 
 .excerpt__text {
-  margin: 0 15px 0 5px;
+  margin: 0 var(--space-sm) 0 var(--space-xxs);
 }
 
 .excerpt__audio {
-  display: block;
   margin-bottom: var(--space-sm);
 }
 
 .excerpt__image {
   height: 200px;
+  margin-bottom: var(--space-sm);
+}
+
+.excerpt__links {
+  font-size: var(--size-body-extra-small);
+  margin-bottom: var(--space-sm);
+}
+
+.excerpt__link {
+  display: inline;
+}
+
+.excerpt__link:not(:last-child) {
+  position: relative;
+  margin-right: var(--space-xs);
+  padding-right: var(--space-xs);
+}
+
+.excerpt__link:not(:last-child):after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  right: 1px;
+  width: 2px;
+  background-color: var(--color-light-blue);
 }

css/metadata.css

@@ -1,18 +1,9 @@
 .metadata {
-  display: flex;
-  flex-flow: row wrap;
   font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
   border-bottom: 1px solid var(--color-light-grey);
 }
 
-.metadata__item {
-  display: flex;
-  align-items: center;
-  margin: 0 var(--space-sm) var(--space-sm) 0;
-  color: var(--color-dark-blue);
-}
-
 @media (--viewport-md) {
   .metadata {
     margin-bottom: var(--space-md);
@@ -21,13 +12,8 @@
 
 @media (--viewport-lg) {
   .metadata {
-    flex-flow: column wrap;
     border-bottom: none;
   }
-
-  .metadata__item {
-    margin-right: 0;
-  }
 }
 
 @media (--viewport-lg) and (min-height: 540px) {
@@ -36,14 +22,37 @@
   }
 }
 
-.metadata__item--light {
+.metadata__list {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+@media (--viewport-lg) {
+  .metadata__list {
+    flex-flow: column wrap;
+  }
+}
+
+.metadata__list-item {
+  display: flex;
+  align-items: center;
+  margin: 0 var(--space-sm) var(--space-sm) 0;
+}
+
+@media (--viewport-lg) {
+  .metadata__list-item {
+    margin-right: 0;
+  }
+}
+
+.metadata__list-item--light {
   color: var(--color-grey);
   display: none;
   margin-bottom: var(--space-sm);
 }
 
 @media (--viewport-lg) {
-  .metadata__item--light {
+  .metadata__list-item--light {
     display: block;
   }
 }