.post-summary { display: grid; grid-template-areas: "title tags" "date tags"; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-column-gap: 8px; grid-row-gap: 2px; white-space: nowrap; } .post-summary > .post-title { grid-area: title; justify-self: start; font-size: large; font-weight: bold; } .post-summary > .post-date { grid-area: date; justify-self: start; font-style: italic; font-size: x-small; opacity: 0.7; } .post-summary > .post-tags { grid-area: tags; justify-self: end; display: flex; flex-direction: row; gap: 4px; } .page-info { display: flex; flex-direction: row; gap: 4px; justify-content: space-between; font-size: small; } .page-info > .page-date { display: inline !important; margin: 0 !important; width: auto !important; justify-self: start; } .page-info > .page-tags { display: flex; flex-direction: row; gap: 4px; } .tag { display: inline !important; margin: 0 !important; width: auto !important; }