.site-content--section, .site-content--list { display: grid; grid-gap: 10px; grid-template-columns: 0.2fr 1fr 0.2fr; grid-template-rows: auto auto 60px; justify-items: center; align-items: center; grid-template-areas: "list-page-header list-page-header list-page-header" "list-page-grid list-page-grid list-page-grid" "list-page-footer list-page-footer list-page-footer"; margin-top: 5em; @include mq('desktop') { grid-template-areas: ". list-page-header ." "list-page-grid list-page-grid list-page-grid" ". list-page-footer ."; } & .site-content__header { grid-area: list-page-header; text-align: center; & .page-header__minor-links { text-align: center; margin: auto; overflow: auto; & ul { list-style: none; & li { float: left; margin: 0 1em; & * { display: inline-block; } } } & .minor-links__categories { width: 100%; display: block; font-size: 0.8em !important; overflow: auto; @include mq('desktop') { font-size: 1em !important; } } & .minor-links__years { width: 100%; display: block; margin: auto; width: fit-content; } } } & .site-content__body { width: 100%; display: grid; justify-items: stretch; align-items: stretch; grid-gap: 10px; grid-area: list-page-grid; grid-template-columns: 1fr; grid-template-rows: 1fr; justify-items: stretch; align-items: stretch; &--list { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto; grid-template-areas: ". sections-list ."; } &--chart { grid-template-columns: 1em 100% 1fr; grid-template-rows: 100%; grid-template-areas: ". section-chart ."; } } & .site-content__footer { grid-area: list-page-footer; } }