/* 1. Horizontal screen (Landscape) */ body { --black: #000; --white: #fff; --blue: #00f; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; --size-grid: calc(100vw / 8); /* vytvorí 8 dielny grid */ --size-unit: 1vw; --size-2xl: calc(var(--size-unit) * 75); --size-xl: calc(var(--size-unit) * 5); --size-l: calc(var(--size-unit) * 4); --size-m: calc(var(--size-unit) * 2); --size-s: calc(var(--size-unit) * 1.5); --size-xs: calc(var(--size-unit) * 2); --size-2xs: calc(var(--size-unit) * 2); --text-2xl: calc(var(--size-unit) * 2.8); --text-xl: calc(var(--size-unit) * 1.9); --text-l: calc(var(--size-unit) * 1.76); --text-m: calc(var(--size-unit) * 1.3); --text-s: calc(var(--size-unit) * 1); --text-xs: calc(var(--size-unit) * 0.034); --text-2xs: calc(var(--size-unit) * 0.012); --carnokytype: Carnokytype, sans-serif; --height-borders: calc(var(--size-unit) * 0.005); --height-header: var(--size-l); --height-body: calc(100vh - var(--height-header)); --height-portfolio: calc(100vh - 1 * var(--height-header)); } h1, h2, h3, h4 { line-height: var(--size-l); margin-bottom: var(--size-m); font-size: var(--text-l); font-weight: normal; } h5, h6, p { line-height: var(--size-m); margin-bottom: var(--size-m); font-size: var(--text-m); font-weight: normal; } footer a { color: var(--col-alfa); border-bottom-color: var(--col-alfa); } footer * { margin: 0; } @media screen and (max-aspect-ratio: 3/1.6) { body { --size-grid: calc(100vw / 6); --size-unit: 1.4vw; } } /* 2. Square screen */ @media screen and (max-aspect-ratio: 3/2.6) { /* Styles for square screens */ body { --size-grid: calc(100vw / 4); /* vytvorí 8 dielny grid */ --size-unit: 2vw; --portfolio-height: auto; --height-header: var(--size-l); } .section-body { margin-top: var(--height-header); } .box-portfolio-scroller { flex: column; } .box-portfolio-info, .box-portfolio-tester { display: block; position: relative; margin: 0; } .button-box-info-close { display: none; } /* 3. Vertical screen (Portrait) */ @media screen and (max-aspect-ratio: 2.6/3) { /* Styles for vertical (portrait) screens */ body { --size-grid: calc(100vw / 2); /* vytvorí 8 dielny grid */ --size-unit: 3.6vw; } .header-text-buy.header-text { text-align: left; position: fixed; bottom: 0; left: 0; right: 0; padding: 0 var(--size-m); background: var(--black); } .box-info-content { display: block; height: auto; width: 100vw } div .landscape { height: auto; width: 100%; } div .square { height: auto; width: 100%; } div .portrait { height: auto; width: 100%; } .box-info-content p, .box-info-content figure, .box-info-content figure *, .box-info-content font-tester, .box-info-content div .font-tester-wide { width: 100%; overflow: hidden; height: auto; } .box-info-content div .font-tester-wide, .box-info-content div .font-tester-mid, .box-info-content div .font-tester-narrow { width: unset; } .footer-open-close { display: none; } } }