.blog .post .title { font-family: serif; margin-top: 2em; } .blog .post .summary { font-size: 1.25em; font-family: serif; } .blog .post .wordcount { margin: 0; } .blog .post .tags-title { font-variant: small-caps; font-weight: bold; margin: 0.5em 0; } .blog .post .tags { display: flex; flex-flow: row wrap; gap: 0.5em; list-style: none; margin-left: 0; li { margin: 0; } a { display: block; padding: 0.5rem; background: #cde; border-radius: 6px; &:before { content: "#" } } } .blog .toc-title { margin-block-end: 0.5em; font-weight: 900; text-transform: uppercase; color: var(--ui-text-muted); } .blog .post .content { margin-block: 4em; } @media (min-width: 75ch) { .blog .post .content { display: grid; grid-template-columns: 1fr minmax(45ch, 75ch) 1fr; } .blog .post .content > * { grid-column: 2; margin-top: 0; } .blog .post .content > figure { grid-column: 1 / span 3; margin: 2em 0; } .blog .post .content figcaption { max-width: 78ch; margin: 0 auto; } .blog .post .content > hr { width: 10ch; } }