Fixing byline multi-line bug

src/components/d-byline.js

@@ -3,20 +3,16 @@ import style from '../styles/d-byline.css';
 export function bylineTemplate(frontMatter) {
   return `
   <div class="byline grid">
-    <div class="authors">
+    <div class="authors-affiliations grid">
       <h3>Authors</h3>
+      <h3>Affiliations</h3>
       ${frontMatter.authors.map(author => `
         <p>
           ${author.personalURL
             ? `<a class="name" href="${author.personalURL}">${author.name}</a>`
             : `<div class="name">${author.name}</div>`
           }
-        </pdiv>
-      `).join("")}
-    </div>
-    <div class="affiliations">
-      <h3>Affiliations</h3>
-      ${frontMatter.authors.map(author => `
+        </p>
         <p>
           ${author.affiliationURL
             ? `<a class="affiliation" href="${author.affiliationURL}">${author.affiliation}</a>`

src/components/d-title.js

@@ -4,17 +4,17 @@ const T = Template('d-title', `
 <style>
 
   :host {
-    padding-top: 1rem;
+    padding: 4rem 0 1.5rem;
     contain: content;
     display: block;
   }
 
   ::slotted(h1) {
     grid-column: text;
-    font-size: 50px;
-    font-weight: 700;
+    font-size: 60px;
+    font-weight: 600;
     line-height: 1.05em;
-    margin: 0 0 0.5rem;
+    margin: 0 0 1rem;
   }
 
   ::slotted(p) {

src/styles/d-byline.css

@@ -8,12 +8,17 @@ d-byline {
 }
 
 d-byline .byline {
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: 2fr 1fr 1fr;
   grid-column: text;
 }
 
+d-byline .authors-affiliations {
+  grid-template-columns: 1fr 1fr;
+
+}
+
 d-byline h3 {
-  font-size: 0.55rem;
+  font-size: 0.6rem;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.5);
   margin: 0;