@media(width <= 64em){.page-wrap{grid-template-columns:[page-header-start page-nav-start page-footer-start page-main-start page-aside-start] 1fr [page-header-end page-nav-end page-footer-end page-main-end page-aside-end];grid-template-rows:[page-header-start] min-content [page-header-end page-nav-start] min-content [page-nav-end page-main-start] 1fr [page-main-end page-aside-start] min-content [page-aside-end page-footer-start] min-content [page-footer-end]}.page-nav{> input + label{ display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--color-primary); background: var(--color-tertiary); box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-secondary), 0 0 0 4px var(--color-primary); } > input:checked + label { background: var(--color-primary); color: var(--color-secondary); box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 3px var(--color-secondary), 0 0 0 5px var(--color-primary); } > input ~ .nav-menu-list { flex-direction: column; row-gap: 1em; > a { flex: 1 0 auto; } } > input:not(checked) ~ .nav-menu-list { > :not(.menuactive){ display: none; } > .menuactive { background: var(--color-tertiary); color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-secondary), 0 0 0 4px var(--color-primary); } }}.page-main{> figure { text-align: center; > img { object-fit: contain; height: auto; width: 80%; } > video { object-fit: contain; height: auto; width: 80%; } }}}@media(width <= 45em){.page-header{font-size:.8em}.page-main{> figure { }}}@media(width <= 35em){.page-header{font-size:.6em}.page-nav{font-size:1em}.page-main{}}@media(width <= 25em){.page-header{font-size:.5em}}