@layer layouts.grid{:root,::backdrop{min-inline-size:320px}.app_gridLayout__ITsKB{display:grid;gap:var(--gutter, 1rem);column-gap:var(--gutter-sm);min-block-size:100vb;--content-size: 960px;--wide-size: 960px;--wide-col-size: calc((var(--wide-size) / 6) - (var(--gutter-sm) * 12));--flex-child__content-gutters: calc(var(--gutter-sm) + var(--grid-page-gutters));--flex-child__wide-gutters: var(--flex-child__content-gutters);--grid-page-gutters: calc(max(6dvi, calc(50dvi - var(--wide-size) / 2)) - var(--gutter-sm));--wide-template-columns: [sidebar-start wide-start col-start] 1fr [col-end content-start] repeat(3, [col-start] 1fr [col-end]) [sidebar-end main-start wide-start] repeat(7, [col-start] 1fr [col-end]) [main-end content-end col-start] 1fr [col-end wide-end];--content-template-columns: [wide-start content-start sidebar-start] repeat(4, [col-start] 1fr [col-end]) [sidebar-end main-start] repeat(8, [col-start] 1fr [col-end]) [main-end content-end wide-end];--template-columns: var(--content-template-columns);--content-template-columns_child: [full-start] 0 [wide-start content-start] 12fr [content-end wide-end] 0 [full-end];--wide-template-columns_child: [full-start] 0 [wide-start] 1fr [content-start] 10fr [content-end] 1fr [ wide-end] 0 [full-end];--child-template-columns: var(--content-template-columns_child);grid-template-columns:[full-start header-start footer-start] var(--grid-page-gutters) var(--template-columns) var(--grid-page-gutters) [header-end footer-end full-end];grid-template-rows:[header-start] auto [header-end content-start wide-start] 1fr [content-end wide-end footer-start] auto [footer-end]}@media screen and (min-width: 960px){.app_gridLayout__ITsKB{--template-columns: var(--wide-template-columns);--flex-child__wide-gutters: calc(var(--flex-child__content-gutters) + var(--wide-col-size));--child-template-columns: var(--wide-template-columns_child)}}}