@media screen and (max-width: 1000px) { * { --slider-height: 50vh; } body { background-color: red; } .project-slideshow { position: fixed; top: 0; width: 100vw; left: 0; margin: 0; height: var(--slider-height); } .project-slideshow img { width: 100%; height: 100%; object-fit: cover; } .main-title { font-size: var(--font-size-XL); line-break: strict; left: -0.65vw; position: relative; top: -0.7vw; margin-top: var(--body-margin); line-height: 0.75; } .project-index :has(.selected) { } .fix { display: block; } .project-toggler.grid { display: block; } main { position: fixed; top: 0; bottom: 0; overflow: auto; width: calc(100% - var(--body-margin)); } main:has(ul li.selected) { top: var(--slider-height); } nav.filter-menu { position: absolute; top: 0; margin-top: calc(var(--line-height-S) * 2); } ul.projects-index { top: calc(var(--line-height-S) * 5); position: absolute; } .fix:hover + .toggle { display: none; } .slide-number { position: fixed; top: var(--slider-height); margin-top: calc(-2 * (var(--line-height-S))); right: var(--body-margin); } }