.header-text-buy { flex: none; display: block; } .header-text-buy.header-text { text-align: right; } .header-text-pdf, .header-text-tester, .header-text-buy { display: none; } .header-text-pdf[attr="display-menu-item"], .header-text-tester[attr="display-menu-item"], .header-text-buy[attr="display-menu-item"] { display: block; } .wrap--scrolling-content { height: var(--height-portfolio); grid-column-gap: 0px; grid-row-gap: 0px; background-color: var(--white); color: var(--black); scrollbar-width: thin; scrollbar-color: var(--blue) var(--black); flex-flow: row; justify-content: flex-start; align-items: flex-start; width: 100vw; display: flex; overflow: auto hidden; cursor: var(--cursor-scroll-horisontal); } .wrap--block { width: auto; height: var(--height-portfolio); margin: 0; padding: 0; scroll-snap-align: start; flex: none; position: relative; } .wrap--block-narrow { width: 35vw; } .wrap--block-square { width: var(--height-portfolio); } .wrap--block-wide { width: 75vw; } .wrap--block p { line-height: var(--size-m); font-size: var(--text-m); margin: var(--size-m); padding: 0; } .wrap--block blockquote p { line-height: var(--size-s); font-size: var(--text-s); } .wrap--block img { width: 100%; height: 100%; object-fit: cover; } .wrap--block .muse-video-player { width: 100%; height: var(--height-portfolio); object-fit: cover; } .wrap--block .font-tester { padding: var(--size-m); width: 100%; height: var(--height-portfolio); } .wrap--block .font-tester, .wrap--block .font-tester *, .wrap--block .font-tester label { cursor: var(--cursor-text); } .link-list-item-grid-portfolio { width: var(--size-grid); height: calc(2 * var(--size-grid)); } .link-list-item-grid-portfolio[data="fonts"]:hover, .link-list-item-grid-portfolio[data="projects"] { transform: translate(0, calc(-1 * var(--size-grid))); } .link-list-item-grid-portfolio[data="fonts"], .link-list-item-grid-portfolio[data="projects"]:hover { transform: translate(0, 0); } .footer-open-close { width: var(--size-l); height: var(--size-l); background-color: var(--black); color: var(--white); font-size: var(--text-l); font-feature-settings: "case"; border: 1px var(--black); justify-content: center; align-items: center; margin-top: -4vw; text-decoration: none; display: flex; position: absolute; bottom: 0; right: 0; z-index: 99; cursor: var(--cursor-pointer); transition: transform 0.3s ease; } .footer-open-close div { transition: transform 0.3s ease; } .footer-open-close:hover { text-decoration: none; } /* 3. Vertical screen (Portrait) */ @media screen and (max-aspect-ratio: 2.6/3) { body { padding-bottom: var(--size-l); } .link--header-category { display: none; } .header-text-buy.header-text { text-align: left; position: fixed; bottom: 0; left: 0; right: 0; padding: 0 var(--size-m); background: var(--black); } .wrap--scrolling-content { display: block; height: auto; width: 100vw; } .wrap--block { width: 100vw; height: auto; margin: 0; padding: 0; scroll-snap-align: start; flex: none; position: relative; } .wrap--block img, .wrap--block .muse-video-player, .wrap--block .font-tester, .wrap--block p { overflow: hidden; height: auto; } .wrap--block .font-tester .LetterinkFontTester-Form { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--size-s); } .wrap--block .font-tester .LetterinkFontTester-Form > * { flex-grow: 1; margin: 0; } .footer-open-close { display: none; } }