another MetaMain visual tweak

src/components/organisms/AssetContent/Bookmark.module.css

@@ -1,7 +1,7 @@
 .bookmark {
   position: absolute;
   top: -10px;
-  right: calc(var(--spacer) / 4);
+  right: calc(var(--spacer) / 8);
   appearance: none;
   background: none;
   border: none;

src/components/organisms/AssetContent/MetaMain.module.css

@@ -4,12 +4,30 @@
   font-size: var(--font-size-small);
 }
 
-.meta p {
+.asset {
-  margin-bottom: 0;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-left: 2rem;
+  padding-right: 3rem;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: calc(var(--spacer) / 1.5);
+  padding-bottom: calc(var(--spacer) / 1.75);
 }
 
-.published {
+@media (min-width: 40rem) {
-  margin-top: calc(var(--spacer) / 2);
+  .asset {
+    margin-top: -0.65rem;
+  }
+}
+
+.assetType {
+  display: inline-block;
+  border-right: 1px solid var(--border-color);
+  padding-right: calc(var(--spacer) / 3.5);
+  margin-right: calc(var(--spacer) / 4);
+}
+
+.byline {
   font-size: var(--font-size-small);
 }
 

src/components/organisms/AssetContent/MetaMain.tsx

@@ -15,8 +15,12 @@ export default function MetaMain(): ReactElement {
 
   return (
     <aside className={styles.meta}>
-      <AssetType type={type} accessType={accessType} />
+      <header className={styles.asset}>
-      <p>
+        <AssetType
+          type={type}
+          accessType={accessType}
+          className={styles.assetType}
+        />
         <ExplorerLink
           networkId={networkId}
           path={
@@ -27,9 +31,9 @@ export default function MetaMain(): ReactElement {
         >
           {`${ddo?.dataTokenInfo.name} — ${ddo?.dataTokenInfo.symbol}`}
         </ExplorerLink>
-      </p>
+      </header>
 
-      <div className={styles.published}>
+      <div className={styles.byline}>
         Published By <Publisher account={owner} />
         <p>
           <Time date={ddo?.created} relative />