1main > *, #page-core {
2    min-width: 0; /** not auto */
3}
4
5
6@media (min-width: 768px) {
7
8    #page-core {
9        display: grid;
10        gap: 1.5rem;
11        grid-template-areas: "page-side page-main";
12        grid-template-columns: minmax(min-content,1fr) 3fr;
13        align-content: flex-start
14    }
15
16    #page-side {
17        grid-area: page-side;
18    }
19
20    #page-main {
21        grid-area: page-main;
22    }
23
24}
25
26
27@media (min-width: 992px) {
28
29    #page-core {
30        grid-template-columns: minmax(min-content,1fr) 5fr;
31    }
32
33    main {
34
35        grid-area: page-main;
36        display: grid;
37        grid-template-columns: [main] 7fr [side] minmax(auto,2fr);
38        grid-auto-flow: row;
39        gap: 1rem;
40        grid-template-areas: unset;
41        margin-left: 1rem;
42        margin-right: 1rem;
43        align-content: flex-start
44
45    }
46
47    #main-toc {
48        grid-column: side;
49        grid-row: 1 / span 5;
50        position: sticky;
51        top: 5rem;
52        z-index: 2;
53        height: calc(100vh - 5rem);
54        overflow-y: auto;
55    }
56
57    #main-header {
58        grid-column: main;
59    }
60
61    #main-content {
62        grid-column: main;
63    }
64
65    #main-footer {
66        grid-column: main;
67    }
68
69    #main-side {
70        grid-area: unset;
71    }
72
73}
74