.index.container { @media (min-width: 100ch) { display: grid; grid-template-columns: minmax(40ch, 60ch) minmax(60ch, 1fr); gap: 2em; padding-block: 2em; } .h-feed { .h-entry { header { display: grid; gap: 0.5em; grid-template-columns: auto 1fr; place-items: center start; margin-block-start: 1em; margin-block-end: 0.5em; .icon { background: var(--ui-overlay); color: var(--ui-overlay-text); padding: 0.5em; border-radius: 100em; svg { height: 100%; width: 100%; } } .description { margin-top: -0.375em; color: var(--ui-text-muted); } } &.reply { .p-name { line-height: 1.2; } .p-summary { line-height: 1.2; margin-inline-start: 1em; color: var(--ui-text-muted); margin-block: 1em; } .meta { line-height: 1.2; } } } hr { margin-block-start: 1.5em; margin-block-end: 1em; } } }