article { display: grid; grid-template-areas: 'header' 'toc' 'content'; grid-template-columns: 100%; grid-template-rows: repeat(3, auto); } article > header { grid-area: header; margin-bottom: 2rem; } .toc-container { grid-area: toc; display: grid; place-items: center; width: min(100%, 45ch); padding: 1rem 2rem; background-color: var(--grey3); border-radius: .5rem; box-shadow: 0 1rem 2rem var(--grey1); } .toc-container > .toc { width: max-content; display: grid; } .toc > * { width: 100%; display: block; } .toc-title { margin-top: 0; font-size: 1.25rem; color: var(--primary); } .toc-h2 { margin-left: .5rem; font-size: .8rem; } .toc-h3 { margin-left: 1rem; font-size: .75rem; } .toc-h4 { margin-left: 1.5rem; font-size: .7rem; } .toc-h5 { margin-left: 2rem; font-size: .65rem; } .toc-h6 { margin-left: 2.5rem; font-size: .6rem; } article > .content { grid-area: content; }