From: Jeremy Thomas Date: Sun, 8 May 2022 23:55:27 +0000 (+0100) Subject: Init Smart Grid X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d82b9943879d7a77588a892c42a382d0adec678b;p=thirdparty%2Fbulma.git Init Smart Grid --- diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 0612c911b..2664becd7 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -184,8 +184,7 @@ fieldset[disabled] .bulma-control-extend { } .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 9999px; border-right-color: transparent; @@ -326,9 +325,7 @@ html { overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - text-size-adjust: 100%; + text-size-adjust: 100%; } article, @@ -454,15 +451,6 @@ table th { color: #363636; } -@-webkit-keyframes spinAround { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); - } -} - @keyframes spinAround { from { transform: rotate(0deg); @@ -4459,14 +4447,10 @@ div.icon-text { } .progress:indeterminate { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-name: moveIndeterminate; - animation-name: moveIndeterminate; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; background-color: #ededed; background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%); background-position: top left; @@ -4498,15 +4482,6 @@ div.icon-text { height: 1.5rem; } -@-webkit-keyframes moveIndeterminate { - from { - background-position: 200% 0; - } - to { - background-position: -200% 0; - } -} - @keyframes moveIndeterminate { from { background-position: 200% 0; @@ -12559,407 +12534,2304 @@ label.panel-block:hover { } } -.tile { - align-items: stretch; - display: block; - flex-basis: 0; - flex-grow: 1; - flex-shrink: 1; - min-height: -webkit-min-content; - min-height: -moz-min-content; - min-height: min-content; +.grid { + --grid-gap: 1.5rem; + --column-count: 12; + --grid-gap-count: calc(var(--column-count) - 1); + --grid-column-min: calc(calc(100% / var(--column-count)) -calc(var(--grid-gap-count) / var(--column-count) * var(--grid-column-gap, var(--grid-gap)))); + --cell-column-span: 1; + --cell-row-span: 1; + display: grid; + grid-gap: var(--grid-gap); + grid-column-gap: var(--grid-column-gap, var(--grid-gap)); + grid-row-gap: var(--grid-row-gap, var(--grid-gap)); + grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min), 1fr)); + grid-template-rows: auto; } -.tile.is-ancestor { - margin-left: -0.75rem; - margin-right: -0.75rem; - margin-top: -0.75rem; +@media screen and (max-width: 768px) { + .grid { + --column-count: 2; + } } -.tile.is-ancestor:last-child { - margin-bottom: -0.75rem; +@media screen and (min-width: 769px), print { + .grid { + --column-count: 4; + } } -.tile.is-ancestor:not(:last-child) { - margin-bottom: 0.75rem; +@media screen and (min-width: 1024px) { + .grid { + --column-count: 8; + } } -.tile.is-child { - margin: 0 !important; +@media screen and (min-width: 1216px) { + .grid { + --column-count: 12; + } } -.tile.is-parent { - padding: 0.75rem; +@media screen and (min-width: 1408px) { + .grid { + --column-count: 16; + } } -.tile.is-vertical { - flex-direction: column; +.cell { + grid-column-end: span var(--cell-column-span); + grid-column-start: var(--cell-column-start); + grid-row-end: span var(--cell-row-span); + grid-row-start: var(--cell-row-start); } -.tile.is-vertical > .tile.is-child:not(:last-child) { - margin-bottom: 1.5rem !important; +.cell.is-col-start-end { + --cell-column-start: -1; } -@media screen and (min-width: 769px), print { - .tile:not(.is-child) { - display: flex; - } - .tile.is-1 { - flex: none; - width: 8.33333%; - } - .tile.is-2 { - flex: none; - width: 16.66667%; - } - .tile.is-3 { - flex: none; - width: 25%; - } - .tile.is-4 { - flex: none; - width: 33.33333%; - } - .tile.is-5 { - flex: none; - width: 41.66667%; - } - .tile.is-6 { - flex: none; - width: 50%; - } - .tile.is-7 { - flex: none; - width: 58.33333%; - } - .tile.is-8 { - flex: none; - width: 66.66667%; - } - .tile.is-9 { - flex: none; - width: 75%; - } - .tile.is-10 { - flex: none; - width: 83.33333%; - } - .tile.is-11 { - flex: none; - width: 91.66667%; - } - .tile.is-12 { - flex: none; - width: 100%; - } +.cell.is-row-start-end { + --cell-row-start: -1; } -/* Bulma Helpers */ -.has-text-white { - color: white !important; +.cell.is-col-start-1 { + --cell-column-start: 1; } -a.has-text-white:hover, a.has-text-white:focus { - color: #e6e6e6 !important; +.cell.is-col-from-end-1 { + --cell-column-start: -1; } -.has-background-white { - background-color: white !important; +.cell.is-col-span-1 { + --cell-column-span: 1; } -.has-text-black { - color: #0a0a0a !important; +.cell.is-row-start-1 { + --cell-row-start: 1; } -a.has-text-black:hover, a.has-text-black:focus { - color: black !important; +.cell.is-row-from-end-1 { + --cell-row-start: -1; } -.has-background-black { - background-color: #0a0a0a !important; +.cell.is-row-span-1 { + --cell-row-span: 1; } -.has-text-light { - color: whitesmoke !important; +.cell.is-col-start-2 { + --cell-column-start: 2; } -a.has-text-light:hover, a.has-text-light:focus { - color: #dbdbdb !important; +.cell.is-col-from-end-2 { + --cell-column-start: -2; } -.has-background-light { - background-color: whitesmoke !important; +.cell.is-col-span-2 { + --cell-column-span: 2; } -.has-text-dark { - color: #363636 !important; +.cell.is-row-start-2 { + --cell-row-start: 2; } -a.has-text-dark:hover, a.has-text-dark:focus { - color: #1c1c1c !important; +.cell.is-row-from-end-2 { + --cell-row-start: -2; } -.has-background-dark { - background-color: #363636 !important; +.cell.is-row-span-2 { + --cell-row-span: 2; } -.has-text-primary { - color: #00d1b2 !important; +.cell.is-col-start-3 { + --cell-column-start: 3; } -a.has-text-primary:hover, a.has-text-primary:focus { - color: #009e86 !important; +.cell.is-col-from-end-3 { + --cell-column-start: -3; } -.has-background-primary { - background-color: #00d1b2 !important; +.cell.is-col-span-3 { + --cell-column-span: 3; } -.has-text-primary-light { - color: #ebfffc !important; +.cell.is-row-start-3 { + --cell-row-start: 3; } -a.has-text-primary-light:hover, a.has-text-primary-light:focus { - color: #b8fff4 !important; +.cell.is-row-from-end-3 { + --cell-row-start: -3; } -.has-background-primary-light { - background-color: #ebfffc !important; +.cell.is-row-span-3 { + --cell-row-span: 3; } -.has-text-primary-dark { - color: #00947e !important; +.cell.is-col-start-4 { + --cell-column-start: 4; } -a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { - color: #00c7a9 !important; +.cell.is-col-from-end-4 { + --cell-column-start: -4; } -.has-background-primary-dark { - background-color: #00947e !important; +.cell.is-col-span-4 { + --cell-column-span: 4; } -.has-text-link { - color: #485fc7 !important; +.cell.is-row-start-4 { + --cell-row-start: 4; } -a.has-text-link:hover, a.has-text-link:focus { - color: #3449a8 !important; +.cell.is-row-from-end-4 { + --cell-row-start: -4; } -.has-background-link { - background-color: #485fc7 !important; +.cell.is-row-span-4 { + --cell-row-span: 4; } -.has-text-link-light { - color: #eff1fa !important; +.cell.is-col-start-5 { + --cell-column-start: 5; } -a.has-text-link-light:hover, a.has-text-link-light:focus { - color: #c8cfee !important; +.cell.is-col-from-end-5 { + --cell-column-start: -5; } -.has-background-link-light { - background-color: #eff1fa !important; +.cell.is-col-span-5 { + --cell-column-span: 5; } -.has-text-link-dark { - color: #3850b7 !important; +.cell.is-row-start-5 { + --cell-row-start: 5; } -a.has-text-link-dark:hover, a.has-text-link-dark:focus { - color: #576dcb !important; +.cell.is-row-from-end-5 { + --cell-row-start: -5; } -.has-background-link-dark { - background-color: #3850b7 !important; +.cell.is-row-span-5 { + --cell-row-span: 5; } -.has-text-info { - color: #3e8ed0 !important; +.cell.is-col-start-6 { + --cell-column-start: 6; } -a.has-text-info:hover, a.has-text-info:focus { - color: #2b74b1 !important; +.cell.is-col-from-end-6 { + --cell-column-start: -6; } -.has-background-info { - background-color: #3e8ed0 !important; +.cell.is-col-span-6 { + --cell-column-span: 6; } -.has-text-info-light { - color: #eff5fb !important; +.cell.is-row-start-6 { + --cell-row-start: 6; } -a.has-text-info-light:hover, a.has-text-info-light:focus { - color: #c6ddf1 !important; +.cell.is-row-from-end-6 { + --cell-row-start: -6; } -.has-background-info-light { - background-color: #eff5fb !important; +.cell.is-row-span-6 { + --cell-row-span: 6; } -.has-text-info-dark { - color: #296fa8 !important; +.cell.is-col-start-7 { + --cell-column-start: 7; } -a.has-text-info-dark:hover, a.has-text-info-dark:focus { - color: #368ace !important; +.cell.is-col-from-end-7 { + --cell-column-start: -7; } -.has-background-info-dark { - background-color: #296fa8 !important; +.cell.is-col-span-7 { + --cell-column-span: 7; } -.has-text-success { - color: #48c78e !important; +.cell.is-row-start-7 { + --cell-row-start: 7; } -a.has-text-success:hover, a.has-text-success:focus { - color: #34a873 !important; +.cell.is-row-from-end-7 { + --cell-row-start: -7; } -.has-background-success { - background-color: #48c78e !important; +.cell.is-row-span-7 { + --cell-row-span: 7; } -.has-text-success-light { - color: #effaf5 !important; +.cell.is-col-start-8 { + --cell-column-start: 8; } -a.has-text-success-light:hover, a.has-text-success-light:focus { - color: #c8eedd !important; +.cell.is-col-from-end-8 { + --cell-column-start: -8; } -.has-background-success-light { - background-color: #effaf5 !important; +.cell.is-col-span-8 { + --cell-column-span: 8; } -.has-text-success-dark { - color: #257953 !important; +.cell.is-row-start-8 { + --cell-row-start: 8; } -a.has-text-success-dark:hover, a.has-text-success-dark:focus { - color: #31a06e !important; +.cell.is-row-from-end-8 { + --cell-row-start: -8; } -.has-background-success-dark { - background-color: #257953 !important; +.cell.is-row-span-8 { + --cell-row-span: 8; } -.has-text-warning { - color: #ffe08a !important; +.cell.is-col-start-9 { + --cell-column-start: 9; } -a.has-text-warning:hover, a.has-text-warning:focus { - color: #ffd257 !important; +.cell.is-col-from-end-9 { + --cell-column-start: -9; } -.has-background-warning { - background-color: #ffe08a !important; +.cell.is-col-span-9 { + --cell-column-span: 9; } -.has-text-warning-light { - color: #fffaeb !important; +.cell.is-row-start-9 { + --cell-row-start: 9; } -a.has-text-warning-light:hover, a.has-text-warning-light:focus { - color: #ffecb8 !important; +.cell.is-row-from-end-9 { + --cell-row-start: -9; } -.has-background-warning-light { - background-color: #fffaeb !important; +.cell.is-row-span-9 { + --cell-row-span: 9; } -.has-text-warning-dark { - color: #946c00 !important; +.cell.is-col-start-10 { + --cell-column-start: 10; } -a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { - color: #c79200 !important; +.cell.is-col-from-end-10 { + --cell-column-start: -10; } -.has-background-warning-dark { - background-color: #946c00 !important; +.cell.is-col-span-10 { + --cell-column-span: 10; } -.has-text-danger { - color: #f14668 !important; +.cell.is-row-start-10 { + --cell-row-start: 10; } -a.has-text-danger:hover, a.has-text-danger:focus { - color: #ee1742 !important; +.cell.is-row-from-end-10 { + --cell-row-start: -10; } -.has-background-danger { - background-color: #f14668 !important; +.cell.is-row-span-10 { + --cell-row-span: 10; } -.has-text-danger-light { - color: #feecf0 !important; +.cell.is-col-start-11 { + --cell-column-start: 11; } -a.has-text-danger-light:hover, a.has-text-danger-light:focus { - color: #fabdc9 !important; +.cell.is-col-from-end-11 { + --cell-column-start: -11; } -.has-background-danger-light { - background-color: #feecf0 !important; +.cell.is-col-span-11 { + --cell-column-span: 11; } -.has-text-danger-dark { - color: #cc0f35 !important; +.cell.is-row-start-11 { + --cell-row-start: 11; } -a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { - color: #ee2049 !important; +.cell.is-row-from-end-11 { + --cell-row-start: -11; } -.has-background-danger-dark { - background-color: #cc0f35 !important; +.cell.is-row-span-11 { + --cell-row-span: 11; } -.has-text-expo { - color: #ffd257 !important; +.cell.is-col-start-12 { + --cell-column-start: 12; } -a.has-text-expo:hover, a.has-text-expo:focus { - color: #ffc424 !important; +.cell.is-col-from-end-12 { + --cell-column-start: -12; } -.has-background-expo { - background-color: #ffd257 !important; +.cell.is-col-span-12 { + --cell-column-span: 12; } -.has-text-expo-light { - color: #fffaeb !important; +.cell.is-row-start-12 { + --cell-row-start: 12; } -a.has-text-expo-light:hover, a.has-text-expo-light:focus { - color: #ffecb8 !important; +.cell.is-row-from-end-12 { + --cell-row-start: -12; } -.has-background-expo-light { - background-color: #fffaeb !important; +.cell.is-row-span-12 { + --cell-row-span: 12; } -.has-text-expo-dark { - color: #946c00 !important; +.cell.is-col-start-13 { + --cell-column-start: 13; } -a.has-text-expo-dark:hover, a.has-text-expo-dark:focus { - color: #c79200 !important; +.cell.is-col-from-end-13 { + --cell-column-start: -13; } -.has-background-expo-dark { - background-color: #946c00 !important; +.cell.is-col-span-13 { + --cell-column-span: 13; } -.has-text-love { - color: #f14668 !important; +.cell.is-row-start-13 { + --cell-row-start: 13; } -a.has-text-love:hover, a.has-text-love:focus { +.cell.is-row-from-end-13 { + --cell-row-start: -13; +} + +.cell.is-row-span-13 { + --cell-row-span: 13; +} + +.cell.is-col-start-14 { + --cell-column-start: 14; +} + +.cell.is-col-from-end-14 { + --cell-column-start: -14; +} + +.cell.is-col-span-14 { + --cell-column-span: 14; +} + +.cell.is-row-start-14 { + --cell-row-start: 14; +} + +.cell.is-row-from-end-14 { + --cell-row-start: -14; +} + +.cell.is-row-span-14 { + --cell-row-span: 14; +} + +.cell.is-col-start-15 { + --cell-column-start: 15; +} + +.cell.is-col-from-end-15 { + --cell-column-start: -15; +} + +.cell.is-col-span-15 { + --cell-column-span: 15; +} + +.cell.is-row-start-15 { + --cell-row-start: 15; +} + +.cell.is-row-from-end-15 { + --cell-row-start: -15; +} + +.cell.is-row-span-15 { + --cell-row-span: 15; +} + +.cell.is-col-start-16 { + --cell-column-start: 16; +} + +.cell.is-col-from-end-16 { + --cell-column-start: -16; +} + +.cell.is-col-span-16 { + --cell-column-span: 16; +} + +.cell.is-row-start-16 { + --cell-row-start: 16; +} + +.cell.is-row-from-end-16 { + --cell-row-start: -16; +} + +.cell.is-row-span-16 { + --cell-row-span: 16; +} + +@media screen and (max-width: 768px) { + .cell.is-col-start-1-mobile { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-mobile { + --cell-column-start: -1; + } + .cell.is-col-span-1-mobile { + --cell-column-span: 1; + } + .cell.is-row-start-1-mobile { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-mobile { + --cell-row-start: -1; + } + .cell.is-row-span-1-mobile { + --cell-row-span: 1; + } + .cell.is-col-start-2-mobile { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-mobile { + --cell-column-start: -2; + } + .cell.is-col-span-2-mobile { + --cell-column-span: 2; + } + .cell.is-row-start-2-mobile { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-mobile { + --cell-row-start: -2; + } + .cell.is-row-span-2-mobile { + --cell-row-span: 2; + } + .cell.is-col-start-3-mobile { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-mobile { + --cell-column-start: -3; + } + .cell.is-col-span-3-mobile { + --cell-column-span: 3; + } + .cell.is-row-start-3-mobile { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-mobile { + --cell-row-start: -3; + } + .cell.is-row-span-3-mobile { + --cell-row-span: 3; + } + .cell.is-col-start-4-mobile { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-mobile { + --cell-column-start: -4; + } + .cell.is-col-span-4-mobile { + --cell-column-span: 4; + } + .cell.is-row-start-4-mobile { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-mobile { + --cell-row-start: -4; + } + .cell.is-row-span-4-mobile { + --cell-row-span: 4; + } + .cell.is-col-start-5-mobile { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-mobile { + --cell-column-start: -5; + } + .cell.is-col-span-5-mobile { + --cell-column-span: 5; + } + .cell.is-row-start-5-mobile { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-mobile { + --cell-row-start: -5; + } + .cell.is-row-span-5-mobile { + --cell-row-span: 5; + } + .cell.is-col-start-6-mobile { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-mobile { + --cell-column-start: -6; + } + .cell.is-col-span-6-mobile { + --cell-column-span: 6; + } + .cell.is-row-start-6-mobile { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-mobile { + --cell-row-start: -6; + } + .cell.is-row-span-6-mobile { + --cell-row-span: 6; + } + .cell.is-col-start-7-mobile { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-mobile { + --cell-column-start: -7; + } + .cell.is-col-span-7-mobile { + --cell-column-span: 7; + } + .cell.is-row-start-7-mobile { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-mobile { + --cell-row-start: -7; + } + .cell.is-row-span-7-mobile { + --cell-row-span: 7; + } + .cell.is-col-start-8-mobile { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-mobile { + --cell-column-start: -8; + } + .cell.is-col-span-8-mobile { + --cell-column-span: 8; + } + .cell.is-row-start-8-mobile { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-mobile { + --cell-row-start: -8; + } + .cell.is-row-span-8-mobile { + --cell-row-span: 8; + } + .cell.is-col-start-9-mobile { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-mobile { + --cell-column-start: -9; + } + .cell.is-col-span-9-mobile { + --cell-column-span: 9; + } + .cell.is-row-start-9-mobile { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-mobile { + --cell-row-start: -9; + } + .cell.is-row-span-9-mobile { + --cell-row-span: 9; + } + .cell.is-col-start-10-mobile { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-mobile { + --cell-column-start: -10; + } + .cell.is-col-span-10-mobile { + --cell-column-span: 10; + } + .cell.is-row-start-10-mobile { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-mobile { + --cell-row-start: -10; + } + .cell.is-row-span-10-mobile { + --cell-row-span: 10; + } + .cell.is-col-start-11-mobile { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-mobile { + --cell-column-start: -11; + } + .cell.is-col-span-11-mobile { + --cell-column-span: 11; + } + .cell.is-row-start-11-mobile { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-mobile { + --cell-row-start: -11; + } + .cell.is-row-span-11-mobile { + --cell-row-span: 11; + } + .cell.is-col-start-12-mobile { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-mobile { + --cell-column-start: -12; + } + .cell.is-col-span-12-mobile { + --cell-column-span: 12; + } + .cell.is-row-start-12-mobile { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-mobile { + --cell-row-start: -12; + } + .cell.is-row-span-12-mobile { + --cell-row-span: 12; + } + .cell.is-col-start-13-mobile { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-mobile { + --cell-column-start: -13; + } + .cell.is-col-span-13-mobile { + --cell-column-span: 13; + } + .cell.is-row-start-13-mobile { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-mobile { + --cell-row-start: -13; + } + .cell.is-row-span-13-mobile { + --cell-row-span: 13; + } + .cell.is-col-start-14-mobile { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-mobile { + --cell-column-start: -14; + } + .cell.is-col-span-14-mobile { + --cell-column-span: 14; + } + .cell.is-row-start-14-mobile { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-mobile { + --cell-row-start: -14; + } + .cell.is-row-span-14-mobile { + --cell-row-span: 14; + } + .cell.is-col-start-15-mobile { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-mobile { + --cell-column-start: -15; + } + .cell.is-col-span-15-mobile { + --cell-column-span: 15; + } + .cell.is-row-start-15-mobile { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-mobile { + --cell-row-start: -15; + } + .cell.is-row-span-15-mobile { + --cell-row-span: 15; + } + .cell.is-col-start-16-mobile { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-mobile { + --cell-column-start: -16; + } + .cell.is-col-span-16-mobile { + --cell-column-span: 16; + } + .cell.is-row-start-16-mobile { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-mobile { + --cell-row-start: -16; + } + .cell.is-row-span-16-mobile { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 769px), print { + .cell.is-col-start-1-tablet { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-tablet { + --cell-column-start: -1; + } + .cell.is-col-span-1-tablet { + --cell-column-span: 1; + } + .cell.is-row-start-1-tablet { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-tablet { + --cell-row-start: -1; + } + .cell.is-row-span-1-tablet { + --cell-row-span: 1; + } + .cell.is-col-start-2-tablet { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-tablet { + --cell-column-start: -2; + } + .cell.is-col-span-2-tablet { + --cell-column-span: 2; + } + .cell.is-row-start-2-tablet { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-tablet { + --cell-row-start: -2; + } + .cell.is-row-span-2-tablet { + --cell-row-span: 2; + } + .cell.is-col-start-3-tablet { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-tablet { + --cell-column-start: -3; + } + .cell.is-col-span-3-tablet { + --cell-column-span: 3; + } + .cell.is-row-start-3-tablet { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-tablet { + --cell-row-start: -3; + } + .cell.is-row-span-3-tablet { + --cell-row-span: 3; + } + .cell.is-col-start-4-tablet { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-tablet { + --cell-column-start: -4; + } + .cell.is-col-span-4-tablet { + --cell-column-span: 4; + } + .cell.is-row-start-4-tablet { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-tablet { + --cell-row-start: -4; + } + .cell.is-row-span-4-tablet { + --cell-row-span: 4; + } + .cell.is-col-start-5-tablet { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-tablet { + --cell-column-start: -5; + } + .cell.is-col-span-5-tablet { + --cell-column-span: 5; + } + .cell.is-row-start-5-tablet { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-tablet { + --cell-row-start: -5; + } + .cell.is-row-span-5-tablet { + --cell-row-span: 5; + } + .cell.is-col-start-6-tablet { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-tablet { + --cell-column-start: -6; + } + .cell.is-col-span-6-tablet { + --cell-column-span: 6; + } + .cell.is-row-start-6-tablet { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-tablet { + --cell-row-start: -6; + } + .cell.is-row-span-6-tablet { + --cell-row-span: 6; + } + .cell.is-col-start-7-tablet { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-tablet { + --cell-column-start: -7; + } + .cell.is-col-span-7-tablet { + --cell-column-span: 7; + } + .cell.is-row-start-7-tablet { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-tablet { + --cell-row-start: -7; + } + .cell.is-row-span-7-tablet { + --cell-row-span: 7; + } + .cell.is-col-start-8-tablet { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-tablet { + --cell-column-start: -8; + } + .cell.is-col-span-8-tablet { + --cell-column-span: 8; + } + .cell.is-row-start-8-tablet { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-tablet { + --cell-row-start: -8; + } + .cell.is-row-span-8-tablet { + --cell-row-span: 8; + } + .cell.is-col-start-9-tablet { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-tablet { + --cell-column-start: -9; + } + .cell.is-col-span-9-tablet { + --cell-column-span: 9; + } + .cell.is-row-start-9-tablet { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-tablet { + --cell-row-start: -9; + } + .cell.is-row-span-9-tablet { + --cell-row-span: 9; + } + .cell.is-col-start-10-tablet { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-tablet { + --cell-column-start: -10; + } + .cell.is-col-span-10-tablet { + --cell-column-span: 10; + } + .cell.is-row-start-10-tablet { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-tablet { + --cell-row-start: -10; + } + .cell.is-row-span-10-tablet { + --cell-row-span: 10; + } + .cell.is-col-start-11-tablet { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-tablet { + --cell-column-start: -11; + } + .cell.is-col-span-11-tablet { + --cell-column-span: 11; + } + .cell.is-row-start-11-tablet { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-tablet { + --cell-row-start: -11; + } + .cell.is-row-span-11-tablet { + --cell-row-span: 11; + } + .cell.is-col-start-12-tablet { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-tablet { + --cell-column-start: -12; + } + .cell.is-col-span-12-tablet { + --cell-column-span: 12; + } + .cell.is-row-start-12-tablet { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-tablet { + --cell-row-start: -12; + } + .cell.is-row-span-12-tablet { + --cell-row-span: 12; + } + .cell.is-col-start-13-tablet { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-tablet { + --cell-column-start: -13; + } + .cell.is-col-span-13-tablet { + --cell-column-span: 13; + } + .cell.is-row-start-13-tablet { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-tablet { + --cell-row-start: -13; + } + .cell.is-row-span-13-tablet { + --cell-row-span: 13; + } + .cell.is-col-start-14-tablet { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-tablet { + --cell-column-start: -14; + } + .cell.is-col-span-14-tablet { + --cell-column-span: 14; + } + .cell.is-row-start-14-tablet { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-tablet { + --cell-row-start: -14; + } + .cell.is-row-span-14-tablet { + --cell-row-span: 14; + } + .cell.is-col-start-15-tablet { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-tablet { + --cell-column-start: -15; + } + .cell.is-col-span-15-tablet { + --cell-column-span: 15; + } + .cell.is-row-start-15-tablet { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-tablet { + --cell-row-start: -15; + } + .cell.is-row-span-15-tablet { + --cell-row-span: 15; + } + .cell.is-col-start-16-tablet { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-tablet { + --cell-column-start: -16; + } + .cell.is-col-span-16-tablet { + --cell-column-span: 16; + } + .cell.is-row-start-16-tablet { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-tablet { + --cell-row-start: -16; + } + .cell.is-row-span-16-tablet { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1024px) { + .cell.is-col-start-1-desktop { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-desktop { + --cell-column-start: -1; + } + .cell.is-col-span-1-desktop { + --cell-column-span: 1; + } + .cell.is-row-start-1-desktop { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-desktop { + --cell-row-start: -1; + } + .cell.is-row-span-1-desktop { + --cell-row-span: 1; + } + .cell.is-col-start-2-desktop { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-desktop { + --cell-column-start: -2; + } + .cell.is-col-span-2-desktop { + --cell-column-span: 2; + } + .cell.is-row-start-2-desktop { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-desktop { + --cell-row-start: -2; + } + .cell.is-row-span-2-desktop { + --cell-row-span: 2; + } + .cell.is-col-start-3-desktop { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-desktop { + --cell-column-start: -3; + } + .cell.is-col-span-3-desktop { + --cell-column-span: 3; + } + .cell.is-row-start-3-desktop { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-desktop { + --cell-row-start: -3; + } + .cell.is-row-span-3-desktop { + --cell-row-span: 3; + } + .cell.is-col-start-4-desktop { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-desktop { + --cell-column-start: -4; + } + .cell.is-col-span-4-desktop { + --cell-column-span: 4; + } + .cell.is-row-start-4-desktop { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-desktop { + --cell-row-start: -4; + } + .cell.is-row-span-4-desktop { + --cell-row-span: 4; + } + .cell.is-col-start-5-desktop { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-desktop { + --cell-column-start: -5; + } + .cell.is-col-span-5-desktop { + --cell-column-span: 5; + } + .cell.is-row-start-5-desktop { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-desktop { + --cell-row-start: -5; + } + .cell.is-row-span-5-desktop { + --cell-row-span: 5; + } + .cell.is-col-start-6-desktop { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-desktop { + --cell-column-start: -6; + } + .cell.is-col-span-6-desktop { + --cell-column-span: 6; + } + .cell.is-row-start-6-desktop { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-desktop { + --cell-row-start: -6; + } + .cell.is-row-span-6-desktop { + --cell-row-span: 6; + } + .cell.is-col-start-7-desktop { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-desktop { + --cell-column-start: -7; + } + .cell.is-col-span-7-desktop { + --cell-column-span: 7; + } + .cell.is-row-start-7-desktop { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-desktop { + --cell-row-start: -7; + } + .cell.is-row-span-7-desktop { + --cell-row-span: 7; + } + .cell.is-col-start-8-desktop { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-desktop { + --cell-column-start: -8; + } + .cell.is-col-span-8-desktop { + --cell-column-span: 8; + } + .cell.is-row-start-8-desktop { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-desktop { + --cell-row-start: -8; + } + .cell.is-row-span-8-desktop { + --cell-row-span: 8; + } + .cell.is-col-start-9-desktop { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-desktop { + --cell-column-start: -9; + } + .cell.is-col-span-9-desktop { + --cell-column-span: 9; + } + .cell.is-row-start-9-desktop { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-desktop { + --cell-row-start: -9; + } + .cell.is-row-span-9-desktop { + --cell-row-span: 9; + } + .cell.is-col-start-10-desktop { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-desktop { + --cell-column-start: -10; + } + .cell.is-col-span-10-desktop { + --cell-column-span: 10; + } + .cell.is-row-start-10-desktop { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-desktop { + --cell-row-start: -10; + } + .cell.is-row-span-10-desktop { + --cell-row-span: 10; + } + .cell.is-col-start-11-desktop { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-desktop { + --cell-column-start: -11; + } + .cell.is-col-span-11-desktop { + --cell-column-span: 11; + } + .cell.is-row-start-11-desktop { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-desktop { + --cell-row-start: -11; + } + .cell.is-row-span-11-desktop { + --cell-row-span: 11; + } + .cell.is-col-start-12-desktop { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-desktop { + --cell-column-start: -12; + } + .cell.is-col-span-12-desktop { + --cell-column-span: 12; + } + .cell.is-row-start-12-desktop { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-desktop { + --cell-row-start: -12; + } + .cell.is-row-span-12-desktop { + --cell-row-span: 12; + } + .cell.is-col-start-13-desktop { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-desktop { + --cell-column-start: -13; + } + .cell.is-col-span-13-desktop { + --cell-column-span: 13; + } + .cell.is-row-start-13-desktop { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-desktop { + --cell-row-start: -13; + } + .cell.is-row-span-13-desktop { + --cell-row-span: 13; + } + .cell.is-col-start-14-desktop { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-desktop { + --cell-column-start: -14; + } + .cell.is-col-span-14-desktop { + --cell-column-span: 14; + } + .cell.is-row-start-14-desktop { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-desktop { + --cell-row-start: -14; + } + .cell.is-row-span-14-desktop { + --cell-row-span: 14; + } + .cell.is-col-start-15-desktop { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-desktop { + --cell-column-start: -15; + } + .cell.is-col-span-15-desktop { + --cell-column-span: 15; + } + .cell.is-row-start-15-desktop { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-desktop { + --cell-row-start: -15; + } + .cell.is-row-span-15-desktop { + --cell-row-span: 15; + } + .cell.is-col-start-16-desktop { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-desktop { + --cell-column-start: -16; + } + .cell.is-col-span-16-desktop { + --cell-column-span: 16; + } + .cell.is-row-start-16-desktop { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-desktop { + --cell-row-start: -16; + } + .cell.is-row-span-16-desktop { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1216px) { + .cell.is-col-start-1-widescreen { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-widescreen { + --cell-column-start: -1; + } + .cell.is-col-span-1-widescreen { + --cell-column-span: 1; + } + .cell.is-row-start-1-widescreen { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-widescreen { + --cell-row-start: -1; + } + .cell.is-row-span-1-widescreen { + --cell-row-span: 1; + } + .cell.is-col-start-2-widescreen { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-widescreen { + --cell-column-start: -2; + } + .cell.is-col-span-2-widescreen { + --cell-column-span: 2; + } + .cell.is-row-start-2-widescreen { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-widescreen { + --cell-row-start: -2; + } + .cell.is-row-span-2-widescreen { + --cell-row-span: 2; + } + .cell.is-col-start-3-widescreen { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-widescreen { + --cell-column-start: -3; + } + .cell.is-col-span-3-widescreen { + --cell-column-span: 3; + } + .cell.is-row-start-3-widescreen { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-widescreen { + --cell-row-start: -3; + } + .cell.is-row-span-3-widescreen { + --cell-row-span: 3; + } + .cell.is-col-start-4-widescreen { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-widescreen { + --cell-column-start: -4; + } + .cell.is-col-span-4-widescreen { + --cell-column-span: 4; + } + .cell.is-row-start-4-widescreen { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-widescreen { + --cell-row-start: -4; + } + .cell.is-row-span-4-widescreen { + --cell-row-span: 4; + } + .cell.is-col-start-5-widescreen { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-widescreen { + --cell-column-start: -5; + } + .cell.is-col-span-5-widescreen { + --cell-column-span: 5; + } + .cell.is-row-start-5-widescreen { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-widescreen { + --cell-row-start: -5; + } + .cell.is-row-span-5-widescreen { + --cell-row-span: 5; + } + .cell.is-col-start-6-widescreen { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-widescreen { + --cell-column-start: -6; + } + .cell.is-col-span-6-widescreen { + --cell-column-span: 6; + } + .cell.is-row-start-6-widescreen { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-widescreen { + --cell-row-start: -6; + } + .cell.is-row-span-6-widescreen { + --cell-row-span: 6; + } + .cell.is-col-start-7-widescreen { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-widescreen { + --cell-column-start: -7; + } + .cell.is-col-span-7-widescreen { + --cell-column-span: 7; + } + .cell.is-row-start-7-widescreen { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-widescreen { + --cell-row-start: -7; + } + .cell.is-row-span-7-widescreen { + --cell-row-span: 7; + } + .cell.is-col-start-8-widescreen { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-widescreen { + --cell-column-start: -8; + } + .cell.is-col-span-8-widescreen { + --cell-column-span: 8; + } + .cell.is-row-start-8-widescreen { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-widescreen { + --cell-row-start: -8; + } + .cell.is-row-span-8-widescreen { + --cell-row-span: 8; + } + .cell.is-col-start-9-widescreen { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-widescreen { + --cell-column-start: -9; + } + .cell.is-col-span-9-widescreen { + --cell-column-span: 9; + } + .cell.is-row-start-9-widescreen { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-widescreen { + --cell-row-start: -9; + } + .cell.is-row-span-9-widescreen { + --cell-row-span: 9; + } + .cell.is-col-start-10-widescreen { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-widescreen { + --cell-column-start: -10; + } + .cell.is-col-span-10-widescreen { + --cell-column-span: 10; + } + .cell.is-row-start-10-widescreen { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-widescreen { + --cell-row-start: -10; + } + .cell.is-row-span-10-widescreen { + --cell-row-span: 10; + } + .cell.is-col-start-11-widescreen { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-widescreen { + --cell-column-start: -11; + } + .cell.is-col-span-11-widescreen { + --cell-column-span: 11; + } + .cell.is-row-start-11-widescreen { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-widescreen { + --cell-row-start: -11; + } + .cell.is-row-span-11-widescreen { + --cell-row-span: 11; + } + .cell.is-col-start-12-widescreen { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-widescreen { + --cell-column-start: -12; + } + .cell.is-col-span-12-widescreen { + --cell-column-span: 12; + } + .cell.is-row-start-12-widescreen { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-widescreen { + --cell-row-start: -12; + } + .cell.is-row-span-12-widescreen { + --cell-row-span: 12; + } + .cell.is-col-start-13-widescreen { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-widescreen { + --cell-column-start: -13; + } + .cell.is-col-span-13-widescreen { + --cell-column-span: 13; + } + .cell.is-row-start-13-widescreen { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-widescreen { + --cell-row-start: -13; + } + .cell.is-row-span-13-widescreen { + --cell-row-span: 13; + } + .cell.is-col-start-14-widescreen { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-widescreen { + --cell-column-start: -14; + } + .cell.is-col-span-14-widescreen { + --cell-column-span: 14; + } + .cell.is-row-start-14-widescreen { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-widescreen { + --cell-row-start: -14; + } + .cell.is-row-span-14-widescreen { + --cell-row-span: 14; + } + .cell.is-col-start-15-widescreen { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-widescreen { + --cell-column-start: -15; + } + .cell.is-col-span-15-widescreen { + --cell-column-span: 15; + } + .cell.is-row-start-15-widescreen { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-widescreen { + --cell-row-start: -15; + } + .cell.is-row-span-15-widescreen { + --cell-row-span: 15; + } + .cell.is-col-start-16-widescreen { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-widescreen { + --cell-column-start: -16; + } + .cell.is-col-span-16-widescreen { + --cell-column-span: 16; + } + .cell.is-row-start-16-widescreen { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-widescreen { + --cell-row-start: -16; + } + .cell.is-row-span-16-widescreen { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1408px) { + .cell.is-col-start-1-fullhd { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-fullhd { + --cell-column-start: -1; + } + .cell.is-col-span-1-fullhd { + --cell-column-span: 1; + } + .cell.is-row-start-1-fullhd { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-fullhd { + --cell-row-start: -1; + } + .cell.is-row-span-1-fullhd { + --cell-row-span: 1; + } + .cell.is-col-start-2-fullhd { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-fullhd { + --cell-column-start: -2; + } + .cell.is-col-span-2-fullhd { + --cell-column-span: 2; + } + .cell.is-row-start-2-fullhd { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-fullhd { + --cell-row-start: -2; + } + .cell.is-row-span-2-fullhd { + --cell-row-span: 2; + } + .cell.is-col-start-3-fullhd { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-fullhd { + --cell-column-start: -3; + } + .cell.is-col-span-3-fullhd { + --cell-column-span: 3; + } + .cell.is-row-start-3-fullhd { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-fullhd { + --cell-row-start: -3; + } + .cell.is-row-span-3-fullhd { + --cell-row-span: 3; + } + .cell.is-col-start-4-fullhd { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-fullhd { + --cell-column-start: -4; + } + .cell.is-col-span-4-fullhd { + --cell-column-span: 4; + } + .cell.is-row-start-4-fullhd { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-fullhd { + --cell-row-start: -4; + } + .cell.is-row-span-4-fullhd { + --cell-row-span: 4; + } + .cell.is-col-start-5-fullhd { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-fullhd { + --cell-column-start: -5; + } + .cell.is-col-span-5-fullhd { + --cell-column-span: 5; + } + .cell.is-row-start-5-fullhd { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-fullhd { + --cell-row-start: -5; + } + .cell.is-row-span-5-fullhd { + --cell-row-span: 5; + } + .cell.is-col-start-6-fullhd { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-fullhd { + --cell-column-start: -6; + } + .cell.is-col-span-6-fullhd { + --cell-column-span: 6; + } + .cell.is-row-start-6-fullhd { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-fullhd { + --cell-row-start: -6; + } + .cell.is-row-span-6-fullhd { + --cell-row-span: 6; + } + .cell.is-col-start-7-fullhd { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-fullhd { + --cell-column-start: -7; + } + .cell.is-col-span-7-fullhd { + --cell-column-span: 7; + } + .cell.is-row-start-7-fullhd { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-fullhd { + --cell-row-start: -7; + } + .cell.is-row-span-7-fullhd { + --cell-row-span: 7; + } + .cell.is-col-start-8-fullhd { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-fullhd { + --cell-column-start: -8; + } + .cell.is-col-span-8-fullhd { + --cell-column-span: 8; + } + .cell.is-row-start-8-fullhd { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-fullhd { + --cell-row-start: -8; + } + .cell.is-row-span-8-fullhd { + --cell-row-span: 8; + } + .cell.is-col-start-9-fullhd { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-fullhd { + --cell-column-start: -9; + } + .cell.is-col-span-9-fullhd { + --cell-column-span: 9; + } + .cell.is-row-start-9-fullhd { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-fullhd { + --cell-row-start: -9; + } + .cell.is-row-span-9-fullhd { + --cell-row-span: 9; + } + .cell.is-col-start-10-fullhd { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-fullhd { + --cell-column-start: -10; + } + .cell.is-col-span-10-fullhd { + --cell-column-span: 10; + } + .cell.is-row-start-10-fullhd { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-fullhd { + --cell-row-start: -10; + } + .cell.is-row-span-10-fullhd { + --cell-row-span: 10; + } + .cell.is-col-start-11-fullhd { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-fullhd { + --cell-column-start: -11; + } + .cell.is-col-span-11-fullhd { + --cell-column-span: 11; + } + .cell.is-row-start-11-fullhd { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-fullhd { + --cell-row-start: -11; + } + .cell.is-row-span-11-fullhd { + --cell-row-span: 11; + } + .cell.is-col-start-12-fullhd { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-fullhd { + --cell-column-start: -12; + } + .cell.is-col-span-12-fullhd { + --cell-column-span: 12; + } + .cell.is-row-start-12-fullhd { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-fullhd { + --cell-row-start: -12; + } + .cell.is-row-span-12-fullhd { + --cell-row-span: 12; + } + .cell.is-col-start-13-fullhd { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-fullhd { + --cell-column-start: -13; + } + .cell.is-col-span-13-fullhd { + --cell-column-span: 13; + } + .cell.is-row-start-13-fullhd { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-fullhd { + --cell-row-start: -13; + } + .cell.is-row-span-13-fullhd { + --cell-row-span: 13; + } + .cell.is-col-start-14-fullhd { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-fullhd { + --cell-column-start: -14; + } + .cell.is-col-span-14-fullhd { + --cell-column-span: 14; + } + .cell.is-row-start-14-fullhd { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-fullhd { + --cell-row-start: -14; + } + .cell.is-row-span-14-fullhd { + --cell-row-span: 14; + } + .cell.is-col-start-15-fullhd { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-fullhd { + --cell-column-start: -15; + } + .cell.is-col-span-15-fullhd { + --cell-column-span: 15; + } + .cell.is-row-start-15-fullhd { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-fullhd { + --cell-row-start: -15; + } + .cell.is-row-span-15-fullhd { + --cell-row-span: 15; + } + .cell.is-col-start-16-fullhd { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-fullhd { + --cell-column-start: -16; + } + .cell.is-col-span-16-fullhd { + --cell-column-span: 16; + } + .cell.is-row-start-16-fullhd { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-fullhd { + --cell-row-start: -16; + } + .cell.is-row-span-16-fullhd { + --cell-row-span: 16; + } +} + +.tile { + align-items: stretch; + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + min-height: min-content; +} + +.tile.is-ancestor { + margin-left: -0.75rem; + margin-right: -0.75rem; + margin-top: -0.75rem; +} + +.tile.is-ancestor:last-child { + margin-bottom: -0.75rem; +} + +.tile.is-ancestor:not(:last-child) { + margin-bottom: 0.75rem; +} + +.tile.is-child { + margin: 0 !important; +} + +.tile.is-parent { + padding: 0.75rem; +} + +.tile.is-vertical { + flex-direction: column; +} + +.tile.is-vertical > .tile.is-child:not(:last-child) { + margin-bottom: 1.5rem !important; +} + +@media screen and (min-width: 769px), print { + .tile:not(.is-child) { + display: flex; + } + .tile.is-1 { + flex: none; + width: 8.33333%; + } + .tile.is-2 { + flex: none; + width: 16.66667%; + } + .tile.is-3 { + flex: none; + width: 25%; + } + .tile.is-4 { + flex: none; + width: 33.33333%; + } + .tile.is-5 { + flex: none; + width: 41.66667%; + } + .tile.is-6 { + flex: none; + width: 50%; + } + .tile.is-7 { + flex: none; + width: 58.33333%; + } + .tile.is-8 { + flex: none; + width: 66.66667%; + } + .tile.is-9 { + flex: none; + width: 75%; + } + .tile.is-10 { + flex: none; + width: 83.33333%; + } + .tile.is-11 { + flex: none; + width: 91.66667%; + } + .tile.is-12 { + flex: none; + width: 100%; + } +} + +/* Bulma Helpers */ +.has-text-white { + color: white !important; +} + +a.has-text-white:hover, a.has-text-white:focus { + color: #e6e6e6 !important; +} + +.has-background-white { + background-color: white !important; +} + +.has-text-black { + color: #0a0a0a !important; +} + +a.has-text-black:hover, a.has-text-black:focus { + color: black !important; +} + +.has-background-black { + background-color: #0a0a0a !important; +} + +.has-text-light { + color: whitesmoke !important; +} + +a.has-text-light:hover, a.has-text-light:focus { + color: #dbdbdb !important; +} + +.has-background-light { + background-color: whitesmoke !important; +} + +.has-text-dark { + color: #363636 !important; +} + +a.has-text-dark:hover, a.has-text-dark:focus { + color: #1c1c1c !important; +} + +.has-background-dark { + background-color: #363636 !important; +} + +.has-text-primary { + color: #00d1b2 !important; +} + +a.has-text-primary:hover, a.has-text-primary:focus { + color: #009e86 !important; +} + +.has-background-primary { + background-color: #00d1b2 !important; +} + +.has-text-primary-light { + color: #ebfffc !important; +} + +a.has-text-primary-light:hover, a.has-text-primary-light:focus { + color: #b8fff4 !important; +} + +.has-background-primary-light { + background-color: #ebfffc !important; +} + +.has-text-primary-dark { + color: #00947e !important; +} + +a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { + color: #00c7a9 !important; +} + +.has-background-primary-dark { + background-color: #00947e !important; +} + +.has-text-link { + color: #485fc7 !important; +} + +a.has-text-link:hover, a.has-text-link:focus { + color: #3449a8 !important; +} + +.has-background-link { + background-color: #485fc7 !important; +} + +.has-text-link-light { + color: #eff1fa !important; +} + +a.has-text-link-light:hover, a.has-text-link-light:focus { + color: #c8cfee !important; +} + +.has-background-link-light { + background-color: #eff1fa !important; +} + +.has-text-link-dark { + color: #3850b7 !important; +} + +a.has-text-link-dark:hover, a.has-text-link-dark:focus { + color: #576dcb !important; +} + +.has-background-link-dark { + background-color: #3850b7 !important; +} + +.has-text-info { + color: #3e8ed0 !important; +} + +a.has-text-info:hover, a.has-text-info:focus { + color: #2b74b1 !important; +} + +.has-background-info { + background-color: #3e8ed0 !important; +} + +.has-text-info-light { + color: #eff5fb !important; +} + +a.has-text-info-light:hover, a.has-text-info-light:focus { + color: #c6ddf1 !important; +} + +.has-background-info-light { + background-color: #eff5fb !important; +} + +.has-text-info-dark { + color: #296fa8 !important; +} + +a.has-text-info-dark:hover, a.has-text-info-dark:focus { + color: #368ace !important; +} + +.has-background-info-dark { + background-color: #296fa8 !important; +} + +.has-text-success { + color: #48c78e !important; +} + +a.has-text-success:hover, a.has-text-success:focus { + color: #34a873 !important; +} + +.has-background-success { + background-color: #48c78e !important; +} + +.has-text-success-light { + color: #effaf5 !important; +} + +a.has-text-success-light:hover, a.has-text-success-light:focus { + color: #c8eedd !important; +} + +.has-background-success-light { + background-color: #effaf5 !important; +} + +.has-text-success-dark { + color: #257953 !important; +} + +a.has-text-success-dark:hover, a.has-text-success-dark:focus { + color: #31a06e !important; +} + +.has-background-success-dark { + background-color: #257953 !important; +} + +.has-text-warning { + color: #ffe08a !important; +} + +a.has-text-warning:hover, a.has-text-warning:focus { + color: #ffd257 !important; +} + +.has-background-warning { + background-color: #ffe08a !important; +} + +.has-text-warning-light { + color: #fffaeb !important; +} + +a.has-text-warning-light:hover, a.has-text-warning-light:focus { + color: #ffecb8 !important; +} + +.has-background-warning-light { + background-color: #fffaeb !important; +} + +.has-text-warning-dark { + color: #946c00 !important; +} + +a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { + color: #c79200 !important; +} + +.has-background-warning-dark { + background-color: #946c00 !important; +} + +.has-text-danger { + color: #f14668 !important; +} + +a.has-text-danger:hover, a.has-text-danger:focus { + color: #ee1742 !important; +} + +.has-background-danger { + background-color: #f14668 !important; +} + +.has-text-danger-light { + color: #feecf0 !important; +} + +a.has-text-danger-light:hover, a.has-text-danger-light:focus { + color: #fabdc9 !important; +} + +.has-background-danger-light { + background-color: #feecf0 !important; +} + +.has-text-danger-dark { + color: #cc0f35 !important; +} + +a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { + color: #ee2049 !important; +} + +.has-background-danger-dark { + background-color: #cc0f35 !important; +} + +.has-text-expo { + color: #ffd257 !important; +} + +a.has-text-expo:hover, a.has-text-expo:focus { + color: #ffc424 !important; +} + +.has-background-expo { + background-color: #ffd257 !important; +} + +.has-text-expo-light { + color: #fffaeb !important; +} + +a.has-text-expo-light:hover, a.has-text-expo-light:focus { + color: #ffecb8 !important; +} + +.has-background-expo-light { + background-color: #fffaeb !important; +} + +.has-text-expo-dark { + color: #946c00 !important; +} + +a.has-text-expo-dark:hover, a.has-text-expo-dark:focus { + color: #c79200 !important; +} + +.has-background-expo-dark { + background-color: #946c00 !important; +} + +.has-text-love { + color: #f14668 !important; +} + +a.has-text-love:hover, a.has-text-love:focus { color: #ee1742 !important; } @@ -17199,7 +19071,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { .bd-anchors { padding: var(--docs-side-padding); - position: -webkit-sticky; position: sticky; top: 0; } @@ -17638,7 +19509,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { max-height: 100vh; overflow-y: auto; padding: var(--docs-side-padding); - position: -webkit-sticky; position: sticky; top: 0; } @@ -21232,8 +23102,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { --device-md-width: 24px; --device-lg-height: 40px; --device-lg-width: 48px; - -webkit-animation: bdDeviceBounce 3.5s infinite; - animation: bdDeviceBounce 3.5s infinite; + animation: bdDeviceBounce 3.5s infinite; border: 0 solid hsl(var(--device-deg), 100%, 53%); border-width: var(--device-y) var(--device-x); border-radius: 0.375em; @@ -21278,44 +23147,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { color: #333333; } -@-webkit-keyframes bdDeviceBounce { - 0% { - --device-deg: var(--device-sm-deg); - height: var(--device-sm-height); - width: var(--device-sm-width); - } - 28% { - --device-deg: var(--device-sm-deg); - height: var(--device-sm-height); - width: var(--device-sm-width); - } - 33% { - --device-deg: var(--device-md-deg); - height: var(--device-md-height); - width: var(--device-md-width); - } - 62% { - --device-deg: var(--device-md-deg); - height: var(--device-md-height); - width: var(--device-md-width); - } - 67% { - --device-deg: var(--device-lg-deg); - height: var(--device-lg-height); - width: var(--device-lg-width); - } - 95% { - --device-deg: var(--device-lg-deg); - height: var(--device-lg-height); - width: var(--device-lg-width); - } - 100% { - --device-deg: var(--device-sm-deg); - height: var(--device-sm-height); - width: var(--device-sm-width); - } -} - @keyframes bdDeviceBounce { 0% { --device-deg: var(--device-sm-deg); @@ -21354,15 +23185,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdGrow { - from { - transform: scale(0); - } - to { - transform: scale(1); - } -} - @keyframes bdGrow { from { transform: scale(0); @@ -21372,17 +23194,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdSlideDown { - from { - opacity: 0; - transform: translateY(-1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideDown { from { opacity: 0; @@ -21394,17 +23205,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdSlideUp { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideUp { from { opacity: 0; @@ -21417,96 +23217,67 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); - animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); + animation-duration: 500ms; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); transform-origin: center center; } .bd-focus-item .title { - -webkit-animation-name: bdSlideDown; - animation-name: bdSlideDown; + animation-name: bdSlideDown; } .bd-focus-item .subtitle { - -webkit-animation-name: bdSlideUp; - animation-name: bdSlideUp; + animation-name: bdSlideUp; } .bd-focus-item:nth-child(1) .title { - -webkit-animation-delay: 0; - animation-delay: 0; + animation-delay: 0; } .bd-focus-item:nth-child(1) .subtitle { - -webkit-animation-delay: 125ms; - animation-delay: 125ms; + animation-delay: 125ms; } .bd-focus-item:nth-child(2) .title { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; + animation-delay: 500ms; } .bd-focus-item:nth-child(2) .subtitle { - -webkit-animation-delay: 625ms; - animation-delay: 625ms; + animation-delay: 625ms; } .bd-focus-item:nth-child(3) .title { - -webkit-animation-delay: 1000ms; - animation-delay: 1000ms; + animation-delay: 1000ms; } .bd-focus-item:nth-child(3) .subtitle { - -webkit-animation-delay: 1125ms; - animation-delay: 1125ms; + animation-delay: 1125ms; } .bd-focus-item:nth-child(4) .title { - -webkit-animation-delay: 1500ms; - animation-delay: 1500ms; + animation-delay: 1500ms; } .bd-focus-item:nth-child(4) .subtitle { - -webkit-animation-delay: 1625ms; - animation-delay: 1625ms; + animation-delay: 1625ms; } .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop { - -webkit-animation-name: bdGrow; - animation-name: bdGrow; + animation-name: bdGrow; transform-origin: bottom center; } .bd-focus-mobile { - -webkit-animation-delay: 0; - animation-delay: 0; + animation-delay: 0; } .bd-focus-tablet { - -webkit-animation-delay: 250ms; - animation-delay: 250ms; + animation-delay: 250ms; } .bd-focus-desktop { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; -} - -@-webkit-keyframes bdCube1 { - 0% { - transform: translate3d(0, -50px, 0); - opacity: 0; - } - 25%, - 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } + animation-delay: 500ms; } @keyframes bdCube1 { @@ -21521,18 +23292,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdCube2 { - 0% { - transform: translate3d(-40px, 30px, 0); - opacity: 0; - } - 25%, - 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube2 { 0% { transform: translate3d(-40px, 30px, 0); @@ -21545,18 +23304,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdCube3 { - 0% { - transform: translate3d(40px, 30px, 0); - opacity: 0; - } - 25%, - 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube3 { 0% { transform: translate3d(40px, 30px, 0); @@ -21570,42 +23317,24 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 { - -webkit-animation-direction: alternate; - animation-direction: alternate; - -webkit-animation-duration: 2000ms; - animation-duration: 2000ms; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; + animation-direction: alternate; + animation-duration: 2000ms; + animation-iteration-count: infinite; } .bd-focus-cube-1 { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; - -webkit-animation-name: bdCube1; - animation-name: bdCube1; + animation-delay: 500ms; + animation-name: bdCube1; } .bd-focus-cube-2 { - -webkit-animation-name: bdCube2; - animation-name: bdCube2; - -webkit-animation-delay: 750ms; - animation-delay: 750ms; + animation-name: bdCube2; + animation-delay: 750ms; } .bd-focus-cube-3 { - -webkit-animation-name: bdCube3; - animation-name: bdCube3; - -webkit-animation-delay: 1000ms; - animation-delay: 1000ms; -} - -@-webkit-keyframes bdFadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } + animation-name: bdCube3; + animation-delay: 1000ms; } @keyframes bdFadeIn { @@ -21617,17 +23346,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdSlowIn { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdSlowIn { from { opacity: 0; @@ -21639,17 +23357,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } } -@-webkit-keyframes bdScaleIn { - from { - opacity: 0; - transform: scale(0); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdScaleIn { from { opacity: 0; @@ -21662,103 +23369,14 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bd-focus-css3 { - -webkit-animation-delay: 1000ms; - animation-delay: 1000ms; - -webkit-animation-name: bdScaleIn; - animation-name: bdScaleIn; + animation-delay: 1000ms; + animation-name: bdScaleIn; } .bd-focus-github { - -webkit-animation-delay: 1500ms; - animation-delay: 1500ms; - -webkit-animation-duration: 1500ms; - animation-duration: 1500ms; - -webkit-animation-name: bdJellyPop; - animation-name: bdJellyPop; -} - -@-webkit-keyframes bdJellyPop { - 0% { - opacity: 0; - transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 3.4% { - opacity: 1; - transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 4.7% { - transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 6.81% { - transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 9.41% { - transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 10.21% { - transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 13.61% { - transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 14.11% { - transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 17.52% { - transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 18.72% { - transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 21.32% { - transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 24.32% { - transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 25.23% { - transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.03% { - transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.93% { - transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 35.54% { - transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 36.74% { - transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 41.04% { - transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 44.44% { - transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 52.15% { - transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 59.86% { - transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 63.26% { - transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 75.28% { - transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 85.49% { - transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 90.69% { - transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 100% { - opacity: 1; - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } + animation-delay: 1500ms; + animation-duration: 1500ms; + animation-name: bdJellyPop; } @keyframes bdJellyPop { @@ -21854,23 +23472,18 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { .bd-best-list { align-items: stretch; - -webkit-animation-duration: 93.6s; - animation-duration: 93.6s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + animation-duration: 93.6s; + animation-iteration-count: infinite; + animation-timing-function: linear; display: flex; left: 0; position: absolute; top: 1.5rem; - -webkit-animation-name: bdBestCarousel; - animation-name: bdBestCarousel; + animation-name: bdBestCarousel; } .bd-best-list:hover { - -webkit-animation-play-state: paused; - animation-play-state: paused; + animation-play-state: paused; } .bd-best-item { @@ -21918,12 +23531,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { width: auto; } -@-webkit-keyframes bdBestCarousel { - 100% { - transform: translateX(calc(-100% + 3120px)); - } -} - @keyframes bdBestCarousel { 100% { transform: translateX(calc(-100% + 3120px)); @@ -22897,8 +24504,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { } .bulma-loader-mixin { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 9999px; border-right-color: transparent; @@ -23139,5 +24745,3 @@ fieldset[disabled] .bulma-control-mixin { background: blue; } } - -/*# sourceMappingURL=bulma-docs.css.map */ \ No newline at end of file diff --git a/docs/css/bulma.css b/docs/css/bulma.css index 2c5a3c133..6a0b450c9 100644 --- a/docs/css/bulma.css +++ b/docs/css/bulma.css @@ -1,4 +1,4 @@ -/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */ +/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ /* Bulma Utilities */ .button, .input, .textarea, .select select, .file-cta, .file-name, .pagination-previous, @@ -2812,7 +2812,7 @@ div.icon-text { } .table th:not([align]) { - text-align: inherit; + text-align: left; } .table tr.is-selected { @@ -8847,6 +8847,3253 @@ label.panel-block:hover { } } +.grid { + --grid-gap: 1.5rem; + --column-count: 12; + --grid-gap-count: calc(var(--column-count) - 1); + --grid-column-min: calc(calc(100% / var(--column-count)) - calc(var(--grid-gap-count) / var(--column-count) * var(--grid-column-gap, var(--grid-gap)))); + --cell-column-span: 1; + --cell-row-span: 1; + display: grid; + grid-gap: var(--grid-gap); + grid-column-gap: var(--grid-column-gap, var(--grid-gap)); + grid-row-gap: var(--grid-row-gap, var(--grid-gap)); + grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min), 1fr)); + grid-template-rows: auto; +} + +@media screen and (max-width: 768px) { + .grid { + --column-count: 2; + } +} + +@media screen and (min-width: 769px), print { + .grid { + --column-count: 4; + } +} + +@media screen and (min-width: 1024px) { + .grid { + --column-count: 8; + } +} + +@media screen and (min-width: 1216px) { + .grid { + --column-count: 12; + } +} + +@media screen and (min-width: 1408px) { + .grid { + --column-count: 16; + } +} + +.cell { + background-color: lavender; + border-radius: 1em; + grid-column-end: span var(--cell-column-span); + grid-column-start: var(--cell-column-start); + grid-row-end: span var(--cell-row-span); + grid-row-start: var(--cell-row-start); + padding: 0.75em; +} + +.cell.is-col-start-end { + --cell-column-start: -1; +} + +.cell.is-row-start-end { + --cell-row-start: -1; +} + +.cell.is-col-start-1 { + --cell-column-start: 1; +} + +.cell.is-col-from-end-1 { + --cell-column-start: -1; +} + +.cell.is-col-span-1 { + --cell-column-span: 1; +} + +.cell.is-row-start-1 { + --cell-row-start: 1; +} + +.cell.is-row-from-end-1 { + --cell-row-start: -1; +} + +.cell.is-row-span-1 { + --cell-row-span: 1; +} + +.cell.is-col-start-2 { + --cell-column-start: 2; +} + +.cell.is-col-from-end-2 { + --cell-column-start: -2; +} + +.cell.is-col-span-2 { + --cell-column-span: 2; +} + +.cell.is-row-start-2 { + --cell-row-start: 2; +} + +.cell.is-row-from-end-2 { + --cell-row-start: -2; +} + +.cell.is-row-span-2 { + --cell-row-span: 2; +} + +.cell.is-col-start-3 { + --cell-column-start: 3; +} + +.cell.is-col-from-end-3 { + --cell-column-start: -3; +} + +.cell.is-col-span-3 { + --cell-column-span: 3; +} + +.cell.is-row-start-3 { + --cell-row-start: 3; +} + +.cell.is-row-from-end-3 { + --cell-row-start: -3; +} + +.cell.is-row-span-3 { + --cell-row-span: 3; +} + +.cell.is-col-start-4 { + --cell-column-start: 4; +} + +.cell.is-col-from-end-4 { + --cell-column-start: -4; +} + +.cell.is-col-span-4 { + --cell-column-span: 4; +} + +.cell.is-row-start-4 { + --cell-row-start: 4; +} + +.cell.is-row-from-end-4 { + --cell-row-start: -4; +} + +.cell.is-row-span-4 { + --cell-row-span: 4; +} + +.cell.is-col-start-5 { + --cell-column-start: 5; +} + +.cell.is-col-from-end-5 { + --cell-column-start: -5; +} + +.cell.is-col-span-5 { + --cell-column-span: 5; +} + +.cell.is-row-start-5 { + --cell-row-start: 5; +} + +.cell.is-row-from-end-5 { + --cell-row-start: -5; +} + +.cell.is-row-span-5 { + --cell-row-span: 5; +} + +.cell.is-col-start-6 { + --cell-column-start: 6; +} + +.cell.is-col-from-end-6 { + --cell-column-start: -6; +} + +.cell.is-col-span-6 { + --cell-column-span: 6; +} + +.cell.is-row-start-6 { + --cell-row-start: 6; +} + +.cell.is-row-from-end-6 { + --cell-row-start: -6; +} + +.cell.is-row-span-6 { + --cell-row-span: 6; +} + +.cell.is-col-start-7 { + --cell-column-start: 7; +} + +.cell.is-col-from-end-7 { + --cell-column-start: -7; +} + +.cell.is-col-span-7 { + --cell-column-span: 7; +} + +.cell.is-row-start-7 { + --cell-row-start: 7; +} + +.cell.is-row-from-end-7 { + --cell-row-start: -7; +} + +.cell.is-row-span-7 { + --cell-row-span: 7; +} + +.cell.is-col-start-8 { + --cell-column-start: 8; +} + +.cell.is-col-from-end-8 { + --cell-column-start: -8; +} + +.cell.is-col-span-8 { + --cell-column-span: 8; +} + +.cell.is-row-start-8 { + --cell-row-start: 8; +} + +.cell.is-row-from-end-8 { + --cell-row-start: -8; +} + +.cell.is-row-span-8 { + --cell-row-span: 8; +} + +.cell.is-col-start-9 { + --cell-column-start: 9; +} + +.cell.is-col-from-end-9 { + --cell-column-start: -9; +} + +.cell.is-col-span-9 { + --cell-column-span: 9; +} + +.cell.is-row-start-9 { + --cell-row-start: 9; +} + +.cell.is-row-from-end-9 { + --cell-row-start: -9; +} + +.cell.is-row-span-9 { + --cell-row-span: 9; +} + +.cell.is-col-start-10 { + --cell-column-start: 10; +} + +.cell.is-col-from-end-10 { + --cell-column-start: -10; +} + +.cell.is-col-span-10 { + --cell-column-span: 10; +} + +.cell.is-row-start-10 { + --cell-row-start: 10; +} + +.cell.is-row-from-end-10 { + --cell-row-start: -10; +} + +.cell.is-row-span-10 { + --cell-row-span: 10; +} + +.cell.is-col-start-11 { + --cell-column-start: 11; +} + +.cell.is-col-from-end-11 { + --cell-column-start: -11; +} + +.cell.is-col-span-11 { + --cell-column-span: 11; +} + +.cell.is-row-start-11 { + --cell-row-start: 11; +} + +.cell.is-row-from-end-11 { + --cell-row-start: -11; +} + +.cell.is-row-span-11 { + --cell-row-span: 11; +} + +.cell.is-col-start-12 { + --cell-column-start: 12; +} + +.cell.is-col-from-end-12 { + --cell-column-start: -12; +} + +.cell.is-col-span-12 { + --cell-column-span: 12; +} + +.cell.is-row-start-12 { + --cell-row-start: 12; +} + +.cell.is-row-from-end-12 { + --cell-row-start: -12; +} + +.cell.is-row-span-12 { + --cell-row-span: 12; +} + +.cell.is-col-start-13 { + --cell-column-start: 13; +} + +.cell.is-col-from-end-13 { + --cell-column-start: -13; +} + +.cell.is-col-span-13 { + --cell-column-span: 13; +} + +.cell.is-row-start-13 { + --cell-row-start: 13; +} + +.cell.is-row-from-end-13 { + --cell-row-start: -13; +} + +.cell.is-row-span-13 { + --cell-row-span: 13; +} + +.cell.is-col-start-14 { + --cell-column-start: 14; +} + +.cell.is-col-from-end-14 { + --cell-column-start: -14; +} + +.cell.is-col-span-14 { + --cell-column-span: 14; +} + +.cell.is-row-start-14 { + --cell-row-start: 14; +} + +.cell.is-row-from-end-14 { + --cell-row-start: -14; +} + +.cell.is-row-span-14 { + --cell-row-span: 14; +} + +.cell.is-col-start-15 { + --cell-column-start: 15; +} + +.cell.is-col-from-end-15 { + --cell-column-start: -15; +} + +.cell.is-col-span-15 { + --cell-column-span: 15; +} + +.cell.is-row-start-15 { + --cell-row-start: 15; +} + +.cell.is-row-from-end-15 { + --cell-row-start: -15; +} + +.cell.is-row-span-15 { + --cell-row-span: 15; +} + +.cell.is-col-start-16 { + --cell-column-start: 16; +} + +.cell.is-col-from-end-16 { + --cell-column-start: -16; +} + +.cell.is-col-span-16 { + --cell-column-span: 16; +} + +.cell.is-row-start-16 { + --cell-row-start: 16; +} + +.cell.is-row-from-end-16 { + --cell-row-start: -16; +} + +.cell.is-row-span-16 { + --cell-row-span: 16; +} + +@media screen and (max-width: 768px) { + .cell.is-col-start-1-mobile { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-mobile { + --cell-column-start: -1; + } + .cell.is-col-span-1-mobile { + --cell-column-span: 1; + } + .cell.is-row-start-1-mobile { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-mobile { + --cell-row-start: -1; + } + .cell.is-row-span-1-mobile { + --cell-row-span: 1; + } + .cell.is-col-start-2-mobile { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-mobile { + --cell-column-start: -2; + } + .cell.is-col-span-2-mobile { + --cell-column-span: 2; + } + .cell.is-row-start-2-mobile { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-mobile { + --cell-row-start: -2; + } + .cell.is-row-span-2-mobile { + --cell-row-span: 2; + } + .cell.is-col-start-3-mobile { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-mobile { + --cell-column-start: -3; + } + .cell.is-col-span-3-mobile { + --cell-column-span: 3; + } + .cell.is-row-start-3-mobile { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-mobile { + --cell-row-start: -3; + } + .cell.is-row-span-3-mobile { + --cell-row-span: 3; + } + .cell.is-col-start-4-mobile { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-mobile { + --cell-column-start: -4; + } + .cell.is-col-span-4-mobile { + --cell-column-span: 4; + } + .cell.is-row-start-4-mobile { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-mobile { + --cell-row-start: -4; + } + .cell.is-row-span-4-mobile { + --cell-row-span: 4; + } + .cell.is-col-start-5-mobile { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-mobile { + --cell-column-start: -5; + } + .cell.is-col-span-5-mobile { + --cell-column-span: 5; + } + .cell.is-row-start-5-mobile { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-mobile { + --cell-row-start: -5; + } + .cell.is-row-span-5-mobile { + --cell-row-span: 5; + } + .cell.is-col-start-6-mobile { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-mobile { + --cell-column-start: -6; + } + .cell.is-col-span-6-mobile { + --cell-column-span: 6; + } + .cell.is-row-start-6-mobile { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-mobile { + --cell-row-start: -6; + } + .cell.is-row-span-6-mobile { + --cell-row-span: 6; + } + .cell.is-col-start-7-mobile { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-mobile { + --cell-column-start: -7; + } + .cell.is-col-span-7-mobile { + --cell-column-span: 7; + } + .cell.is-row-start-7-mobile { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-mobile { + --cell-row-start: -7; + } + .cell.is-row-span-7-mobile { + --cell-row-span: 7; + } + .cell.is-col-start-8-mobile { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-mobile { + --cell-column-start: -8; + } + .cell.is-col-span-8-mobile { + --cell-column-span: 8; + } + .cell.is-row-start-8-mobile { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-mobile { + --cell-row-start: -8; + } + .cell.is-row-span-8-mobile { + --cell-row-span: 8; + } + .cell.is-col-start-9-mobile { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-mobile { + --cell-column-start: -9; + } + .cell.is-col-span-9-mobile { + --cell-column-span: 9; + } + .cell.is-row-start-9-mobile { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-mobile { + --cell-row-start: -9; + } + .cell.is-row-span-9-mobile { + --cell-row-span: 9; + } + .cell.is-col-start-10-mobile { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-mobile { + --cell-column-start: -10; + } + .cell.is-col-span-10-mobile { + --cell-column-span: 10; + } + .cell.is-row-start-10-mobile { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-mobile { + --cell-row-start: -10; + } + .cell.is-row-span-10-mobile { + --cell-row-span: 10; + } + .cell.is-col-start-11-mobile { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-mobile { + --cell-column-start: -11; + } + .cell.is-col-span-11-mobile { + --cell-column-span: 11; + } + .cell.is-row-start-11-mobile { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-mobile { + --cell-row-start: -11; + } + .cell.is-row-span-11-mobile { + --cell-row-span: 11; + } + .cell.is-col-start-12-mobile { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-mobile { + --cell-column-start: -12; + } + .cell.is-col-span-12-mobile { + --cell-column-span: 12; + } + .cell.is-row-start-12-mobile { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-mobile { + --cell-row-start: -12; + } + .cell.is-row-span-12-mobile { + --cell-row-span: 12; + } + .cell.is-col-start-13-mobile { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-mobile { + --cell-column-start: -13; + } + .cell.is-col-span-13-mobile { + --cell-column-span: 13; + } + .cell.is-row-start-13-mobile { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-mobile { + --cell-row-start: -13; + } + .cell.is-row-span-13-mobile { + --cell-row-span: 13; + } + .cell.is-col-start-14-mobile { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-mobile { + --cell-column-start: -14; + } + .cell.is-col-span-14-mobile { + --cell-column-span: 14; + } + .cell.is-row-start-14-mobile { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-mobile { + --cell-row-start: -14; + } + .cell.is-row-span-14-mobile { + --cell-row-span: 14; + } + .cell.is-col-start-15-mobile { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-mobile { + --cell-column-start: -15; + } + .cell.is-col-span-15-mobile { + --cell-column-span: 15; + } + .cell.is-row-start-15-mobile { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-mobile { + --cell-row-start: -15; + } + .cell.is-row-span-15-mobile { + --cell-row-span: 15; + } + .cell.is-col-start-16-mobile { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-mobile { + --cell-column-start: -16; + } + .cell.is-col-span-16-mobile { + --cell-column-span: 16; + } + .cell.is-row-start-16-mobile { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-mobile { + --cell-row-start: -16; + } + .cell.is-row-span-16-mobile { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 769px), print { + .cell.is-col-start-1-tablet { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-tablet { + --cell-column-start: -1; + } + .cell.is-col-span-1-tablet { + --cell-column-span: 1; + } + .cell.is-row-start-1-tablet { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-tablet { + --cell-row-start: -1; + } + .cell.is-row-span-1-tablet { + --cell-row-span: 1; + } + .cell.is-col-start-2-tablet { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-tablet { + --cell-column-start: -2; + } + .cell.is-col-span-2-tablet { + --cell-column-span: 2; + } + .cell.is-row-start-2-tablet { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-tablet { + --cell-row-start: -2; + } + .cell.is-row-span-2-tablet { + --cell-row-span: 2; + } + .cell.is-col-start-3-tablet { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-tablet { + --cell-column-start: -3; + } + .cell.is-col-span-3-tablet { + --cell-column-span: 3; + } + .cell.is-row-start-3-tablet { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-tablet { + --cell-row-start: -3; + } + .cell.is-row-span-3-tablet { + --cell-row-span: 3; + } + .cell.is-col-start-4-tablet { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-tablet { + --cell-column-start: -4; + } + .cell.is-col-span-4-tablet { + --cell-column-span: 4; + } + .cell.is-row-start-4-tablet { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-tablet { + --cell-row-start: -4; + } + .cell.is-row-span-4-tablet { + --cell-row-span: 4; + } + .cell.is-col-start-5-tablet { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-tablet { + --cell-column-start: -5; + } + .cell.is-col-span-5-tablet { + --cell-column-span: 5; + } + .cell.is-row-start-5-tablet { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-tablet { + --cell-row-start: -5; + } + .cell.is-row-span-5-tablet { + --cell-row-span: 5; + } + .cell.is-col-start-6-tablet { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-tablet { + --cell-column-start: -6; + } + .cell.is-col-span-6-tablet { + --cell-column-span: 6; + } + .cell.is-row-start-6-tablet { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-tablet { + --cell-row-start: -6; + } + .cell.is-row-span-6-tablet { + --cell-row-span: 6; + } + .cell.is-col-start-7-tablet { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-tablet { + --cell-column-start: -7; + } + .cell.is-col-span-7-tablet { + --cell-column-span: 7; + } + .cell.is-row-start-7-tablet { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-tablet { + --cell-row-start: -7; + } + .cell.is-row-span-7-tablet { + --cell-row-span: 7; + } + .cell.is-col-start-8-tablet { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-tablet { + --cell-column-start: -8; + } + .cell.is-col-span-8-tablet { + --cell-column-span: 8; + } + .cell.is-row-start-8-tablet { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-tablet { + --cell-row-start: -8; + } + .cell.is-row-span-8-tablet { + --cell-row-span: 8; + } + .cell.is-col-start-9-tablet { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-tablet { + --cell-column-start: -9; + } + .cell.is-col-span-9-tablet { + --cell-column-span: 9; + } + .cell.is-row-start-9-tablet { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-tablet { + --cell-row-start: -9; + } + .cell.is-row-span-9-tablet { + --cell-row-span: 9; + } + .cell.is-col-start-10-tablet { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-tablet { + --cell-column-start: -10; + } + .cell.is-col-span-10-tablet { + --cell-column-span: 10; + } + .cell.is-row-start-10-tablet { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-tablet { + --cell-row-start: -10; + } + .cell.is-row-span-10-tablet { + --cell-row-span: 10; + } + .cell.is-col-start-11-tablet { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-tablet { + --cell-column-start: -11; + } + .cell.is-col-span-11-tablet { + --cell-column-span: 11; + } + .cell.is-row-start-11-tablet { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-tablet { + --cell-row-start: -11; + } + .cell.is-row-span-11-tablet { + --cell-row-span: 11; + } + .cell.is-col-start-12-tablet { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-tablet { + --cell-column-start: -12; + } + .cell.is-col-span-12-tablet { + --cell-column-span: 12; + } + .cell.is-row-start-12-tablet { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-tablet { + --cell-row-start: -12; + } + .cell.is-row-span-12-tablet { + --cell-row-span: 12; + } + .cell.is-col-start-13-tablet { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-tablet { + --cell-column-start: -13; + } + .cell.is-col-span-13-tablet { + --cell-column-span: 13; + } + .cell.is-row-start-13-tablet { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-tablet { + --cell-row-start: -13; + } + .cell.is-row-span-13-tablet { + --cell-row-span: 13; + } + .cell.is-col-start-14-tablet { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-tablet { + --cell-column-start: -14; + } + .cell.is-col-span-14-tablet { + --cell-column-span: 14; + } + .cell.is-row-start-14-tablet { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-tablet { + --cell-row-start: -14; + } + .cell.is-row-span-14-tablet { + --cell-row-span: 14; + } + .cell.is-col-start-15-tablet { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-tablet { + --cell-column-start: -15; + } + .cell.is-col-span-15-tablet { + --cell-column-span: 15; + } + .cell.is-row-start-15-tablet { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-tablet { + --cell-row-start: -15; + } + .cell.is-row-span-15-tablet { + --cell-row-span: 15; + } + .cell.is-col-start-16-tablet { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-tablet { + --cell-column-start: -16; + } + .cell.is-col-span-16-tablet { + --cell-column-span: 16; + } + .cell.is-row-start-16-tablet { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-tablet { + --cell-row-start: -16; + } + .cell.is-row-span-16-tablet { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .cell.is-col-start-1-tablet-only { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-tablet-only { + --cell-column-start: -1; + } + .cell.is-col-span-1-tablet-only { + --cell-column-span: 1; + } + .cell.is-row-start-1-tablet-only { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-tablet-only { + --cell-row-start: -1; + } + .cell.is-row-span-1-tablet-only { + --cell-row-span: 1; + } + .cell.is-col-start-2-tablet-only { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-tablet-only { + --cell-column-start: -2; + } + .cell.is-col-span-2-tablet-only { + --cell-column-span: 2; + } + .cell.is-row-start-2-tablet-only { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-tablet-only { + --cell-row-start: -2; + } + .cell.is-row-span-2-tablet-only { + --cell-row-span: 2; + } + .cell.is-col-start-3-tablet-only { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-tablet-only { + --cell-column-start: -3; + } + .cell.is-col-span-3-tablet-only { + --cell-column-span: 3; + } + .cell.is-row-start-3-tablet-only { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-tablet-only { + --cell-row-start: -3; + } + .cell.is-row-span-3-tablet-only { + --cell-row-span: 3; + } + .cell.is-col-start-4-tablet-only { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-tablet-only { + --cell-column-start: -4; + } + .cell.is-col-span-4-tablet-only { + --cell-column-span: 4; + } + .cell.is-row-start-4-tablet-only { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-tablet-only { + --cell-row-start: -4; + } + .cell.is-row-span-4-tablet-only { + --cell-row-span: 4; + } + .cell.is-col-start-5-tablet-only { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-tablet-only { + --cell-column-start: -5; + } + .cell.is-col-span-5-tablet-only { + --cell-column-span: 5; + } + .cell.is-row-start-5-tablet-only { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-tablet-only { + --cell-row-start: -5; + } + .cell.is-row-span-5-tablet-only { + --cell-row-span: 5; + } + .cell.is-col-start-6-tablet-only { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-tablet-only { + --cell-column-start: -6; + } + .cell.is-col-span-6-tablet-only { + --cell-column-span: 6; + } + .cell.is-row-start-6-tablet-only { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-tablet-only { + --cell-row-start: -6; + } + .cell.is-row-span-6-tablet-only { + --cell-row-span: 6; + } + .cell.is-col-start-7-tablet-only { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-tablet-only { + --cell-column-start: -7; + } + .cell.is-col-span-7-tablet-only { + --cell-column-span: 7; + } + .cell.is-row-start-7-tablet-only { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-tablet-only { + --cell-row-start: -7; + } + .cell.is-row-span-7-tablet-only { + --cell-row-span: 7; + } + .cell.is-col-start-8-tablet-only { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-tablet-only { + --cell-column-start: -8; + } + .cell.is-col-span-8-tablet-only { + --cell-column-span: 8; + } + .cell.is-row-start-8-tablet-only { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-tablet-only { + --cell-row-start: -8; + } + .cell.is-row-span-8-tablet-only { + --cell-row-span: 8; + } + .cell.is-col-start-9-tablet-only { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-tablet-only { + --cell-column-start: -9; + } + .cell.is-col-span-9-tablet-only { + --cell-column-span: 9; + } + .cell.is-row-start-9-tablet-only { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-tablet-only { + --cell-row-start: -9; + } + .cell.is-row-span-9-tablet-only { + --cell-row-span: 9; + } + .cell.is-col-start-10-tablet-only { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-tablet-only { + --cell-column-start: -10; + } + .cell.is-col-span-10-tablet-only { + --cell-column-span: 10; + } + .cell.is-row-start-10-tablet-only { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-tablet-only { + --cell-row-start: -10; + } + .cell.is-row-span-10-tablet-only { + --cell-row-span: 10; + } + .cell.is-col-start-11-tablet-only { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-tablet-only { + --cell-column-start: -11; + } + .cell.is-col-span-11-tablet-only { + --cell-column-span: 11; + } + .cell.is-row-start-11-tablet-only { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-tablet-only { + --cell-row-start: -11; + } + .cell.is-row-span-11-tablet-only { + --cell-row-span: 11; + } + .cell.is-col-start-12-tablet-only { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-tablet-only { + --cell-column-start: -12; + } + .cell.is-col-span-12-tablet-only { + --cell-column-span: 12; + } + .cell.is-row-start-12-tablet-only { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-tablet-only { + --cell-row-start: -12; + } + .cell.is-row-span-12-tablet-only { + --cell-row-span: 12; + } + .cell.is-col-start-13-tablet-only { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-tablet-only { + --cell-column-start: -13; + } + .cell.is-col-span-13-tablet-only { + --cell-column-span: 13; + } + .cell.is-row-start-13-tablet-only { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-tablet-only { + --cell-row-start: -13; + } + .cell.is-row-span-13-tablet-only { + --cell-row-span: 13; + } + .cell.is-col-start-14-tablet-only { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-tablet-only { + --cell-column-start: -14; + } + .cell.is-col-span-14-tablet-only { + --cell-column-span: 14; + } + .cell.is-row-start-14-tablet-only { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-tablet-only { + --cell-row-start: -14; + } + .cell.is-row-span-14-tablet-only { + --cell-row-span: 14; + } + .cell.is-col-start-15-tablet-only { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-tablet-only { + --cell-column-start: -15; + } + .cell.is-col-span-15-tablet-only { + --cell-column-span: 15; + } + .cell.is-row-start-15-tablet-only { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-tablet-only { + --cell-row-start: -15; + } + .cell.is-row-span-15-tablet-only { + --cell-row-span: 15; + } + .cell.is-col-start-16-tablet-only { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-tablet-only { + --cell-column-start: -16; + } + .cell.is-col-span-16-tablet-only { + --cell-column-span: 16; + } + .cell.is-row-start-16-tablet-only { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-tablet-only { + --cell-row-start: -16; + } + .cell.is-row-span-16-tablet-only { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1024px) { + .cell.is-col-start-1-desktop { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-desktop { + --cell-column-start: -1; + } + .cell.is-col-span-1-desktop { + --cell-column-span: 1; + } + .cell.is-row-start-1-desktop { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-desktop { + --cell-row-start: -1; + } + .cell.is-row-span-1-desktop { + --cell-row-span: 1; + } + .cell.is-col-start-2-desktop { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-desktop { + --cell-column-start: -2; + } + .cell.is-col-span-2-desktop { + --cell-column-span: 2; + } + .cell.is-row-start-2-desktop { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-desktop { + --cell-row-start: -2; + } + .cell.is-row-span-2-desktop { + --cell-row-span: 2; + } + .cell.is-col-start-3-desktop { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-desktop { + --cell-column-start: -3; + } + .cell.is-col-span-3-desktop { + --cell-column-span: 3; + } + .cell.is-row-start-3-desktop { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-desktop { + --cell-row-start: -3; + } + .cell.is-row-span-3-desktop { + --cell-row-span: 3; + } + .cell.is-col-start-4-desktop { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-desktop { + --cell-column-start: -4; + } + .cell.is-col-span-4-desktop { + --cell-column-span: 4; + } + .cell.is-row-start-4-desktop { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-desktop { + --cell-row-start: -4; + } + .cell.is-row-span-4-desktop { + --cell-row-span: 4; + } + .cell.is-col-start-5-desktop { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-desktop { + --cell-column-start: -5; + } + .cell.is-col-span-5-desktop { + --cell-column-span: 5; + } + .cell.is-row-start-5-desktop { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-desktop { + --cell-row-start: -5; + } + .cell.is-row-span-5-desktop { + --cell-row-span: 5; + } + .cell.is-col-start-6-desktop { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-desktop { + --cell-column-start: -6; + } + .cell.is-col-span-6-desktop { + --cell-column-span: 6; + } + .cell.is-row-start-6-desktop { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-desktop { + --cell-row-start: -6; + } + .cell.is-row-span-6-desktop { + --cell-row-span: 6; + } + .cell.is-col-start-7-desktop { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-desktop { + --cell-column-start: -7; + } + .cell.is-col-span-7-desktop { + --cell-column-span: 7; + } + .cell.is-row-start-7-desktop { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-desktop { + --cell-row-start: -7; + } + .cell.is-row-span-7-desktop { + --cell-row-span: 7; + } + .cell.is-col-start-8-desktop { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-desktop { + --cell-column-start: -8; + } + .cell.is-col-span-8-desktop { + --cell-column-span: 8; + } + .cell.is-row-start-8-desktop { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-desktop { + --cell-row-start: -8; + } + .cell.is-row-span-8-desktop { + --cell-row-span: 8; + } + .cell.is-col-start-9-desktop { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-desktop { + --cell-column-start: -9; + } + .cell.is-col-span-9-desktop { + --cell-column-span: 9; + } + .cell.is-row-start-9-desktop { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-desktop { + --cell-row-start: -9; + } + .cell.is-row-span-9-desktop { + --cell-row-span: 9; + } + .cell.is-col-start-10-desktop { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-desktop { + --cell-column-start: -10; + } + .cell.is-col-span-10-desktop { + --cell-column-span: 10; + } + .cell.is-row-start-10-desktop { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-desktop { + --cell-row-start: -10; + } + .cell.is-row-span-10-desktop { + --cell-row-span: 10; + } + .cell.is-col-start-11-desktop { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-desktop { + --cell-column-start: -11; + } + .cell.is-col-span-11-desktop { + --cell-column-span: 11; + } + .cell.is-row-start-11-desktop { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-desktop { + --cell-row-start: -11; + } + .cell.is-row-span-11-desktop { + --cell-row-span: 11; + } + .cell.is-col-start-12-desktop { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-desktop { + --cell-column-start: -12; + } + .cell.is-col-span-12-desktop { + --cell-column-span: 12; + } + .cell.is-row-start-12-desktop { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-desktop { + --cell-row-start: -12; + } + .cell.is-row-span-12-desktop { + --cell-row-span: 12; + } + .cell.is-col-start-13-desktop { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-desktop { + --cell-column-start: -13; + } + .cell.is-col-span-13-desktop { + --cell-column-span: 13; + } + .cell.is-row-start-13-desktop { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-desktop { + --cell-row-start: -13; + } + .cell.is-row-span-13-desktop { + --cell-row-span: 13; + } + .cell.is-col-start-14-desktop { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-desktop { + --cell-column-start: -14; + } + .cell.is-col-span-14-desktop { + --cell-column-span: 14; + } + .cell.is-row-start-14-desktop { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-desktop { + --cell-row-start: -14; + } + .cell.is-row-span-14-desktop { + --cell-row-span: 14; + } + .cell.is-col-start-15-desktop { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-desktop { + --cell-column-start: -15; + } + .cell.is-col-span-15-desktop { + --cell-column-span: 15; + } + .cell.is-row-start-15-desktop { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-desktop { + --cell-row-start: -15; + } + .cell.is-row-span-15-desktop { + --cell-row-span: 15; + } + .cell.is-col-start-16-desktop { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-desktop { + --cell-column-start: -16; + } + .cell.is-col-span-16-desktop { + --cell-column-span: 16; + } + .cell.is-row-start-16-desktop { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-desktop { + --cell-row-start: -16; + } + .cell.is-row-span-16-desktop { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .cell.is-col-start-1-desktop-only { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-desktop-only { + --cell-column-start: -1; + } + .cell.is-col-span-1-desktop-only { + --cell-column-span: 1; + } + .cell.is-row-start-1-desktop-only { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-desktop-only { + --cell-row-start: -1; + } + .cell.is-row-span-1-desktop-only { + --cell-row-span: 1; + } + .cell.is-col-start-2-desktop-only { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-desktop-only { + --cell-column-start: -2; + } + .cell.is-col-span-2-desktop-only { + --cell-column-span: 2; + } + .cell.is-row-start-2-desktop-only { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-desktop-only { + --cell-row-start: -2; + } + .cell.is-row-span-2-desktop-only { + --cell-row-span: 2; + } + .cell.is-col-start-3-desktop-only { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-desktop-only { + --cell-column-start: -3; + } + .cell.is-col-span-3-desktop-only { + --cell-column-span: 3; + } + .cell.is-row-start-3-desktop-only { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-desktop-only { + --cell-row-start: -3; + } + .cell.is-row-span-3-desktop-only { + --cell-row-span: 3; + } + .cell.is-col-start-4-desktop-only { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-desktop-only { + --cell-column-start: -4; + } + .cell.is-col-span-4-desktop-only { + --cell-column-span: 4; + } + .cell.is-row-start-4-desktop-only { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-desktop-only { + --cell-row-start: -4; + } + .cell.is-row-span-4-desktop-only { + --cell-row-span: 4; + } + .cell.is-col-start-5-desktop-only { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-desktop-only { + --cell-column-start: -5; + } + .cell.is-col-span-5-desktop-only { + --cell-column-span: 5; + } + .cell.is-row-start-5-desktop-only { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-desktop-only { + --cell-row-start: -5; + } + .cell.is-row-span-5-desktop-only { + --cell-row-span: 5; + } + .cell.is-col-start-6-desktop-only { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-desktop-only { + --cell-column-start: -6; + } + .cell.is-col-span-6-desktop-only { + --cell-column-span: 6; + } + .cell.is-row-start-6-desktop-only { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-desktop-only { + --cell-row-start: -6; + } + .cell.is-row-span-6-desktop-only { + --cell-row-span: 6; + } + .cell.is-col-start-7-desktop-only { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-desktop-only { + --cell-column-start: -7; + } + .cell.is-col-span-7-desktop-only { + --cell-column-span: 7; + } + .cell.is-row-start-7-desktop-only { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-desktop-only { + --cell-row-start: -7; + } + .cell.is-row-span-7-desktop-only { + --cell-row-span: 7; + } + .cell.is-col-start-8-desktop-only { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-desktop-only { + --cell-column-start: -8; + } + .cell.is-col-span-8-desktop-only { + --cell-column-span: 8; + } + .cell.is-row-start-8-desktop-only { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-desktop-only { + --cell-row-start: -8; + } + .cell.is-row-span-8-desktop-only { + --cell-row-span: 8; + } + .cell.is-col-start-9-desktop-only { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-desktop-only { + --cell-column-start: -9; + } + .cell.is-col-span-9-desktop-only { + --cell-column-span: 9; + } + .cell.is-row-start-9-desktop-only { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-desktop-only { + --cell-row-start: -9; + } + .cell.is-row-span-9-desktop-only { + --cell-row-span: 9; + } + .cell.is-col-start-10-desktop-only { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-desktop-only { + --cell-column-start: -10; + } + .cell.is-col-span-10-desktop-only { + --cell-column-span: 10; + } + .cell.is-row-start-10-desktop-only { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-desktop-only { + --cell-row-start: -10; + } + .cell.is-row-span-10-desktop-only { + --cell-row-span: 10; + } + .cell.is-col-start-11-desktop-only { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-desktop-only { + --cell-column-start: -11; + } + .cell.is-col-span-11-desktop-only { + --cell-column-span: 11; + } + .cell.is-row-start-11-desktop-only { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-desktop-only { + --cell-row-start: -11; + } + .cell.is-row-span-11-desktop-only { + --cell-row-span: 11; + } + .cell.is-col-start-12-desktop-only { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-desktop-only { + --cell-column-start: -12; + } + .cell.is-col-span-12-desktop-only { + --cell-column-span: 12; + } + .cell.is-row-start-12-desktop-only { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-desktop-only { + --cell-row-start: -12; + } + .cell.is-row-span-12-desktop-only { + --cell-row-span: 12; + } + .cell.is-col-start-13-desktop-only { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-desktop-only { + --cell-column-start: -13; + } + .cell.is-col-span-13-desktop-only { + --cell-column-span: 13; + } + .cell.is-row-start-13-desktop-only { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-desktop-only { + --cell-row-start: -13; + } + .cell.is-row-span-13-desktop-only { + --cell-row-span: 13; + } + .cell.is-col-start-14-desktop-only { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-desktop-only { + --cell-column-start: -14; + } + .cell.is-col-span-14-desktop-only { + --cell-column-span: 14; + } + .cell.is-row-start-14-desktop-only { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-desktop-only { + --cell-row-start: -14; + } + .cell.is-row-span-14-desktop-only { + --cell-row-span: 14; + } + .cell.is-col-start-15-desktop-only { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-desktop-only { + --cell-column-start: -15; + } + .cell.is-col-span-15-desktop-only { + --cell-column-span: 15; + } + .cell.is-row-start-15-desktop-only { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-desktop-only { + --cell-row-start: -15; + } + .cell.is-row-span-15-desktop-only { + --cell-row-span: 15; + } + .cell.is-col-start-16-desktop-only { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-desktop-only { + --cell-column-start: -16; + } + .cell.is-col-span-16-desktop-only { + --cell-column-span: 16; + } + .cell.is-row-start-16-desktop-only { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-desktop-only { + --cell-row-start: -16; + } + .cell.is-row-span-16-desktop-only { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1216px) { + .cell.is-col-start-1-widescreen { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-widescreen { + --cell-column-start: -1; + } + .cell.is-col-span-1-widescreen { + --cell-column-span: 1; + } + .cell.is-row-start-1-widescreen { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-widescreen { + --cell-row-start: -1; + } + .cell.is-row-span-1-widescreen { + --cell-row-span: 1; + } + .cell.is-col-start-2-widescreen { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-widescreen { + --cell-column-start: -2; + } + .cell.is-col-span-2-widescreen { + --cell-column-span: 2; + } + .cell.is-row-start-2-widescreen { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-widescreen { + --cell-row-start: -2; + } + .cell.is-row-span-2-widescreen { + --cell-row-span: 2; + } + .cell.is-col-start-3-widescreen { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-widescreen { + --cell-column-start: -3; + } + .cell.is-col-span-3-widescreen { + --cell-column-span: 3; + } + .cell.is-row-start-3-widescreen { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-widescreen { + --cell-row-start: -3; + } + .cell.is-row-span-3-widescreen { + --cell-row-span: 3; + } + .cell.is-col-start-4-widescreen { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-widescreen { + --cell-column-start: -4; + } + .cell.is-col-span-4-widescreen { + --cell-column-span: 4; + } + .cell.is-row-start-4-widescreen { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-widescreen { + --cell-row-start: -4; + } + .cell.is-row-span-4-widescreen { + --cell-row-span: 4; + } + .cell.is-col-start-5-widescreen { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-widescreen { + --cell-column-start: -5; + } + .cell.is-col-span-5-widescreen { + --cell-column-span: 5; + } + .cell.is-row-start-5-widescreen { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-widescreen { + --cell-row-start: -5; + } + .cell.is-row-span-5-widescreen { + --cell-row-span: 5; + } + .cell.is-col-start-6-widescreen { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-widescreen { + --cell-column-start: -6; + } + .cell.is-col-span-6-widescreen { + --cell-column-span: 6; + } + .cell.is-row-start-6-widescreen { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-widescreen { + --cell-row-start: -6; + } + .cell.is-row-span-6-widescreen { + --cell-row-span: 6; + } + .cell.is-col-start-7-widescreen { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-widescreen { + --cell-column-start: -7; + } + .cell.is-col-span-7-widescreen { + --cell-column-span: 7; + } + .cell.is-row-start-7-widescreen { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-widescreen { + --cell-row-start: -7; + } + .cell.is-row-span-7-widescreen { + --cell-row-span: 7; + } + .cell.is-col-start-8-widescreen { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-widescreen { + --cell-column-start: -8; + } + .cell.is-col-span-8-widescreen { + --cell-column-span: 8; + } + .cell.is-row-start-8-widescreen { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-widescreen { + --cell-row-start: -8; + } + .cell.is-row-span-8-widescreen { + --cell-row-span: 8; + } + .cell.is-col-start-9-widescreen { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-widescreen { + --cell-column-start: -9; + } + .cell.is-col-span-9-widescreen { + --cell-column-span: 9; + } + .cell.is-row-start-9-widescreen { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-widescreen { + --cell-row-start: -9; + } + .cell.is-row-span-9-widescreen { + --cell-row-span: 9; + } + .cell.is-col-start-10-widescreen { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-widescreen { + --cell-column-start: -10; + } + .cell.is-col-span-10-widescreen { + --cell-column-span: 10; + } + .cell.is-row-start-10-widescreen { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-widescreen { + --cell-row-start: -10; + } + .cell.is-row-span-10-widescreen { + --cell-row-span: 10; + } + .cell.is-col-start-11-widescreen { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-widescreen { + --cell-column-start: -11; + } + .cell.is-col-span-11-widescreen { + --cell-column-span: 11; + } + .cell.is-row-start-11-widescreen { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-widescreen { + --cell-row-start: -11; + } + .cell.is-row-span-11-widescreen { + --cell-row-span: 11; + } + .cell.is-col-start-12-widescreen { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-widescreen { + --cell-column-start: -12; + } + .cell.is-col-span-12-widescreen { + --cell-column-span: 12; + } + .cell.is-row-start-12-widescreen { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-widescreen { + --cell-row-start: -12; + } + .cell.is-row-span-12-widescreen { + --cell-row-span: 12; + } + .cell.is-col-start-13-widescreen { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-widescreen { + --cell-column-start: -13; + } + .cell.is-col-span-13-widescreen { + --cell-column-span: 13; + } + .cell.is-row-start-13-widescreen { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-widescreen { + --cell-row-start: -13; + } + .cell.is-row-span-13-widescreen { + --cell-row-span: 13; + } + .cell.is-col-start-14-widescreen { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-widescreen { + --cell-column-start: -14; + } + .cell.is-col-span-14-widescreen { + --cell-column-span: 14; + } + .cell.is-row-start-14-widescreen { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-widescreen { + --cell-row-start: -14; + } + .cell.is-row-span-14-widescreen { + --cell-row-span: 14; + } + .cell.is-col-start-15-widescreen { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-widescreen { + --cell-column-start: -15; + } + .cell.is-col-span-15-widescreen { + --cell-column-span: 15; + } + .cell.is-row-start-15-widescreen { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-widescreen { + --cell-row-start: -15; + } + .cell.is-row-span-15-widescreen { + --cell-row-span: 15; + } + .cell.is-col-start-16-widescreen { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-widescreen { + --cell-column-start: -16; + } + .cell.is-col-span-16-widescreen { + --cell-column-span: 16; + } + .cell.is-row-start-16-widescreen { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-widescreen { + --cell-row-start: -16; + } + .cell.is-row-span-16-widescreen { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .cell.is-col-start-1-widescreen-only { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-widescreen-only { + --cell-column-start: -1; + } + .cell.is-col-span-1-widescreen-only { + --cell-column-span: 1; + } + .cell.is-row-start-1-widescreen-only { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-widescreen-only { + --cell-row-start: -1; + } + .cell.is-row-span-1-widescreen-only { + --cell-row-span: 1; + } + .cell.is-col-start-2-widescreen-only { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-widescreen-only { + --cell-column-start: -2; + } + .cell.is-col-span-2-widescreen-only { + --cell-column-span: 2; + } + .cell.is-row-start-2-widescreen-only { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-widescreen-only { + --cell-row-start: -2; + } + .cell.is-row-span-2-widescreen-only { + --cell-row-span: 2; + } + .cell.is-col-start-3-widescreen-only { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-widescreen-only { + --cell-column-start: -3; + } + .cell.is-col-span-3-widescreen-only { + --cell-column-span: 3; + } + .cell.is-row-start-3-widescreen-only { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-widescreen-only { + --cell-row-start: -3; + } + .cell.is-row-span-3-widescreen-only { + --cell-row-span: 3; + } + .cell.is-col-start-4-widescreen-only { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-widescreen-only { + --cell-column-start: -4; + } + .cell.is-col-span-4-widescreen-only { + --cell-column-span: 4; + } + .cell.is-row-start-4-widescreen-only { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-widescreen-only { + --cell-row-start: -4; + } + .cell.is-row-span-4-widescreen-only { + --cell-row-span: 4; + } + .cell.is-col-start-5-widescreen-only { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-widescreen-only { + --cell-column-start: -5; + } + .cell.is-col-span-5-widescreen-only { + --cell-column-span: 5; + } + .cell.is-row-start-5-widescreen-only { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-widescreen-only { + --cell-row-start: -5; + } + .cell.is-row-span-5-widescreen-only { + --cell-row-span: 5; + } + .cell.is-col-start-6-widescreen-only { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-widescreen-only { + --cell-column-start: -6; + } + .cell.is-col-span-6-widescreen-only { + --cell-column-span: 6; + } + .cell.is-row-start-6-widescreen-only { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-widescreen-only { + --cell-row-start: -6; + } + .cell.is-row-span-6-widescreen-only { + --cell-row-span: 6; + } + .cell.is-col-start-7-widescreen-only { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-widescreen-only { + --cell-column-start: -7; + } + .cell.is-col-span-7-widescreen-only { + --cell-column-span: 7; + } + .cell.is-row-start-7-widescreen-only { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-widescreen-only { + --cell-row-start: -7; + } + .cell.is-row-span-7-widescreen-only { + --cell-row-span: 7; + } + .cell.is-col-start-8-widescreen-only { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-widescreen-only { + --cell-column-start: -8; + } + .cell.is-col-span-8-widescreen-only { + --cell-column-span: 8; + } + .cell.is-row-start-8-widescreen-only { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-widescreen-only { + --cell-row-start: -8; + } + .cell.is-row-span-8-widescreen-only { + --cell-row-span: 8; + } + .cell.is-col-start-9-widescreen-only { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-widescreen-only { + --cell-column-start: -9; + } + .cell.is-col-span-9-widescreen-only { + --cell-column-span: 9; + } + .cell.is-row-start-9-widescreen-only { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-widescreen-only { + --cell-row-start: -9; + } + .cell.is-row-span-9-widescreen-only { + --cell-row-span: 9; + } + .cell.is-col-start-10-widescreen-only { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-widescreen-only { + --cell-column-start: -10; + } + .cell.is-col-span-10-widescreen-only { + --cell-column-span: 10; + } + .cell.is-row-start-10-widescreen-only { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-widescreen-only { + --cell-row-start: -10; + } + .cell.is-row-span-10-widescreen-only { + --cell-row-span: 10; + } + .cell.is-col-start-11-widescreen-only { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-widescreen-only { + --cell-column-start: -11; + } + .cell.is-col-span-11-widescreen-only { + --cell-column-span: 11; + } + .cell.is-row-start-11-widescreen-only { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-widescreen-only { + --cell-row-start: -11; + } + .cell.is-row-span-11-widescreen-only { + --cell-row-span: 11; + } + .cell.is-col-start-12-widescreen-only { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-widescreen-only { + --cell-column-start: -12; + } + .cell.is-col-span-12-widescreen-only { + --cell-column-span: 12; + } + .cell.is-row-start-12-widescreen-only { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-widescreen-only { + --cell-row-start: -12; + } + .cell.is-row-span-12-widescreen-only { + --cell-row-span: 12; + } + .cell.is-col-start-13-widescreen-only { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-widescreen-only { + --cell-column-start: -13; + } + .cell.is-col-span-13-widescreen-only { + --cell-column-span: 13; + } + .cell.is-row-start-13-widescreen-only { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-widescreen-only { + --cell-row-start: -13; + } + .cell.is-row-span-13-widescreen-only { + --cell-row-span: 13; + } + .cell.is-col-start-14-widescreen-only { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-widescreen-only { + --cell-column-start: -14; + } + .cell.is-col-span-14-widescreen-only { + --cell-column-span: 14; + } + .cell.is-row-start-14-widescreen-only { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-widescreen-only { + --cell-row-start: -14; + } + .cell.is-row-span-14-widescreen-only { + --cell-row-span: 14; + } + .cell.is-col-start-15-widescreen-only { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-widescreen-only { + --cell-column-start: -15; + } + .cell.is-col-span-15-widescreen-only { + --cell-column-span: 15; + } + .cell.is-row-start-15-widescreen-only { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-widescreen-only { + --cell-row-start: -15; + } + .cell.is-row-span-15-widescreen-only { + --cell-row-span: 15; + } + .cell.is-col-start-16-widescreen-only { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-widescreen-only { + --cell-column-start: -16; + } + .cell.is-col-span-16-widescreen-only { + --cell-column-span: 16; + } + .cell.is-row-start-16-widescreen-only { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-widescreen-only { + --cell-row-start: -16; + } + .cell.is-row-span-16-widescreen-only { + --cell-row-span: 16; + } +} + +@media screen and (min-width: 1408px) { + .cell.is-col-start-1-fullhd { + --cell-column-start: 1; + } + .cell.is-col-from-end-1-fullhd { + --cell-column-start: -1; + } + .cell.is-col-span-1-fullhd { + --cell-column-span: 1; + } + .cell.is-row-start-1-fullhd { + --cell-row-start: 1; + } + .cell.is-row-from-end-1-fullhd { + --cell-row-start: -1; + } + .cell.is-row-span-1-fullhd { + --cell-row-span: 1; + } + .cell.is-col-start-2-fullhd { + --cell-column-start: 2; + } + .cell.is-col-from-end-2-fullhd { + --cell-column-start: -2; + } + .cell.is-col-span-2-fullhd { + --cell-column-span: 2; + } + .cell.is-row-start-2-fullhd { + --cell-row-start: 2; + } + .cell.is-row-from-end-2-fullhd { + --cell-row-start: -2; + } + .cell.is-row-span-2-fullhd { + --cell-row-span: 2; + } + .cell.is-col-start-3-fullhd { + --cell-column-start: 3; + } + .cell.is-col-from-end-3-fullhd { + --cell-column-start: -3; + } + .cell.is-col-span-3-fullhd { + --cell-column-span: 3; + } + .cell.is-row-start-3-fullhd { + --cell-row-start: 3; + } + .cell.is-row-from-end-3-fullhd { + --cell-row-start: -3; + } + .cell.is-row-span-3-fullhd { + --cell-row-span: 3; + } + .cell.is-col-start-4-fullhd { + --cell-column-start: 4; + } + .cell.is-col-from-end-4-fullhd { + --cell-column-start: -4; + } + .cell.is-col-span-4-fullhd { + --cell-column-span: 4; + } + .cell.is-row-start-4-fullhd { + --cell-row-start: 4; + } + .cell.is-row-from-end-4-fullhd { + --cell-row-start: -4; + } + .cell.is-row-span-4-fullhd { + --cell-row-span: 4; + } + .cell.is-col-start-5-fullhd { + --cell-column-start: 5; + } + .cell.is-col-from-end-5-fullhd { + --cell-column-start: -5; + } + .cell.is-col-span-5-fullhd { + --cell-column-span: 5; + } + .cell.is-row-start-5-fullhd { + --cell-row-start: 5; + } + .cell.is-row-from-end-5-fullhd { + --cell-row-start: -5; + } + .cell.is-row-span-5-fullhd { + --cell-row-span: 5; + } + .cell.is-col-start-6-fullhd { + --cell-column-start: 6; + } + .cell.is-col-from-end-6-fullhd { + --cell-column-start: -6; + } + .cell.is-col-span-6-fullhd { + --cell-column-span: 6; + } + .cell.is-row-start-6-fullhd { + --cell-row-start: 6; + } + .cell.is-row-from-end-6-fullhd { + --cell-row-start: -6; + } + .cell.is-row-span-6-fullhd { + --cell-row-span: 6; + } + .cell.is-col-start-7-fullhd { + --cell-column-start: 7; + } + .cell.is-col-from-end-7-fullhd { + --cell-column-start: -7; + } + .cell.is-col-span-7-fullhd { + --cell-column-span: 7; + } + .cell.is-row-start-7-fullhd { + --cell-row-start: 7; + } + .cell.is-row-from-end-7-fullhd { + --cell-row-start: -7; + } + .cell.is-row-span-7-fullhd { + --cell-row-span: 7; + } + .cell.is-col-start-8-fullhd { + --cell-column-start: 8; + } + .cell.is-col-from-end-8-fullhd { + --cell-column-start: -8; + } + .cell.is-col-span-8-fullhd { + --cell-column-span: 8; + } + .cell.is-row-start-8-fullhd { + --cell-row-start: 8; + } + .cell.is-row-from-end-8-fullhd { + --cell-row-start: -8; + } + .cell.is-row-span-8-fullhd { + --cell-row-span: 8; + } + .cell.is-col-start-9-fullhd { + --cell-column-start: 9; + } + .cell.is-col-from-end-9-fullhd { + --cell-column-start: -9; + } + .cell.is-col-span-9-fullhd { + --cell-column-span: 9; + } + .cell.is-row-start-9-fullhd { + --cell-row-start: 9; + } + .cell.is-row-from-end-9-fullhd { + --cell-row-start: -9; + } + .cell.is-row-span-9-fullhd { + --cell-row-span: 9; + } + .cell.is-col-start-10-fullhd { + --cell-column-start: 10; + } + .cell.is-col-from-end-10-fullhd { + --cell-column-start: -10; + } + .cell.is-col-span-10-fullhd { + --cell-column-span: 10; + } + .cell.is-row-start-10-fullhd { + --cell-row-start: 10; + } + .cell.is-row-from-end-10-fullhd { + --cell-row-start: -10; + } + .cell.is-row-span-10-fullhd { + --cell-row-span: 10; + } + .cell.is-col-start-11-fullhd { + --cell-column-start: 11; + } + .cell.is-col-from-end-11-fullhd { + --cell-column-start: -11; + } + .cell.is-col-span-11-fullhd { + --cell-column-span: 11; + } + .cell.is-row-start-11-fullhd { + --cell-row-start: 11; + } + .cell.is-row-from-end-11-fullhd { + --cell-row-start: -11; + } + .cell.is-row-span-11-fullhd { + --cell-row-span: 11; + } + .cell.is-col-start-12-fullhd { + --cell-column-start: 12; + } + .cell.is-col-from-end-12-fullhd { + --cell-column-start: -12; + } + .cell.is-col-span-12-fullhd { + --cell-column-span: 12; + } + .cell.is-row-start-12-fullhd { + --cell-row-start: 12; + } + .cell.is-row-from-end-12-fullhd { + --cell-row-start: -12; + } + .cell.is-row-span-12-fullhd { + --cell-row-span: 12; + } + .cell.is-col-start-13-fullhd { + --cell-column-start: 13; + } + .cell.is-col-from-end-13-fullhd { + --cell-column-start: -13; + } + .cell.is-col-span-13-fullhd { + --cell-column-span: 13; + } + .cell.is-row-start-13-fullhd { + --cell-row-start: 13; + } + .cell.is-row-from-end-13-fullhd { + --cell-row-start: -13; + } + .cell.is-row-span-13-fullhd { + --cell-row-span: 13; + } + .cell.is-col-start-14-fullhd { + --cell-column-start: 14; + } + .cell.is-col-from-end-14-fullhd { + --cell-column-start: -14; + } + .cell.is-col-span-14-fullhd { + --cell-column-span: 14; + } + .cell.is-row-start-14-fullhd { + --cell-row-start: 14; + } + .cell.is-row-from-end-14-fullhd { + --cell-row-start: -14; + } + .cell.is-row-span-14-fullhd { + --cell-row-span: 14; + } + .cell.is-col-start-15-fullhd { + --cell-column-start: 15; + } + .cell.is-col-from-end-15-fullhd { + --cell-column-start: -15; + } + .cell.is-col-span-15-fullhd { + --cell-column-span: 15; + } + .cell.is-row-start-15-fullhd { + --cell-row-start: 15; + } + .cell.is-row-from-end-15-fullhd { + --cell-row-start: -15; + } + .cell.is-row-span-15-fullhd { + --cell-row-span: 15; + } + .cell.is-col-start-16-fullhd { + --cell-column-start: 16; + } + .cell.is-col-from-end-16-fullhd { + --cell-column-start: -16; + } + .cell.is-col-span-16-fullhd { + --cell-column-span: 16; + } + .cell.is-row-start-16-fullhd { + --cell-row-start: 16; + } + .cell.is-row-from-end-16-fullhd { + --cell-row-start: -16; + } + .cell.is-row-span-16-fullhd { + --cell-row-span: 16; + } +} + +.has-1-cols { + --column-count: 1; +} + +.has-2-cols { + --column-count: 2; +} + +.has-3-cols { + --column-count: 3; +} + +.has-4-cols { + --column-count: 4; +} + +.has-5-cols { + --column-count: 5; +} + +.has-6-cols { + --column-count: 6; +} + +.has-7-cols { + --column-count: 7; +} + +.has-8-cols { + --column-count: 8; +} + +.has-9-cols { + --column-count: 9; +} + +.has-10-cols { + --column-count: 10; +} + +.has-11-cols { + --column-count: 11; +} + +.has-12-cols { + --column-count: 12; +} + +.has-13-cols { + --column-count: 13; +} + +.has-14-cols { + --column-count: 14; +} + +.has-15-cols { + --column-count: 15; +} + +.has-16-cols { + --column-count: 16; +} + +@media screen and (max-width: 768px) { + .has-1-cols-mobile { + --column-count: 1; + } + .has-2-cols-mobile { + --column-count: 2; + } + .has-3-cols-mobile { + --column-count: 3; + } + .has-4-cols-mobile { + --column-count: 4; + } + .has-5-cols-mobile { + --column-count: 5; + } + .has-6-cols-mobile { + --column-count: 6; + } + .has-7-cols-mobile { + --column-count: 7; + } + .has-8-cols-mobile { + --column-count: 8; + } + .has-9-cols-mobile { + --column-count: 9; + } + .has-10-cols-mobile { + --column-count: 10; + } + .has-11-cols-mobile { + --column-count: 11; + } + .has-12-cols-mobile { + --column-count: 12; + } + .has-13-cols-mobile { + --column-count: 13; + } + .has-14-cols-mobile { + --column-count: 14; + } + .has-15-cols-mobile { + --column-count: 15; + } + .has-16-cols-mobile { + --column-count: 16; + } +} + +@media screen and (min-width: 769px), print { + .has-1-cols-tablet { + --column-count: 1; + } + .has-2-cols-tablet { + --column-count: 2; + } + .has-3-cols-tablet { + --column-count: 3; + } + .has-4-cols-tablet { + --column-count: 4; + } + .has-5-cols-tablet { + --column-count: 5; + } + .has-6-cols-tablet { + --column-count: 6; + } + .has-7-cols-tablet { + --column-count: 7; + } + .has-8-cols-tablet { + --column-count: 8; + } + .has-9-cols-tablet { + --column-count: 9; + } + .has-10-cols-tablet { + --column-count: 10; + } + .has-11-cols-tablet { + --column-count: 11; + } + .has-12-cols-tablet { + --column-count: 12; + } + .has-13-cols-tablet { + --column-count: 13; + } + .has-14-cols-tablet { + --column-count: 14; + } + .has-15-cols-tablet { + --column-count: 15; + } + .has-16-cols-tablet { + --column-count: 16; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-1-cols-tablet-only { + --column-count: 1; + } + .has-2-cols-tablet-only { + --column-count: 2; + } + .has-3-cols-tablet-only { + --column-count: 3; + } + .has-4-cols-tablet-only { + --column-count: 4; + } + .has-5-cols-tablet-only { + --column-count: 5; + } + .has-6-cols-tablet-only { + --column-count: 6; + } + .has-7-cols-tablet-only { + --column-count: 7; + } + .has-8-cols-tablet-only { + --column-count: 8; + } + .has-9-cols-tablet-only { + --column-count: 9; + } + .has-10-cols-tablet-only { + --column-count: 10; + } + .has-11-cols-tablet-only { + --column-count: 11; + } + .has-12-cols-tablet-only { + --column-count: 12; + } + .has-13-cols-tablet-only { + --column-count: 13; + } + .has-14-cols-tablet-only { + --column-count: 14; + } + .has-15-cols-tablet-only { + --column-count: 15; + } + .has-16-cols-tablet-only { + --column-count: 16; + } +} + +@media screen and (min-width: 1024px) { + .has-1-cols-desktop { + --column-count: 1; + } + .has-2-cols-desktop { + --column-count: 2; + } + .has-3-cols-desktop { + --column-count: 3; + } + .has-4-cols-desktop { + --column-count: 4; + } + .has-5-cols-desktop { + --column-count: 5; + } + .has-6-cols-desktop { + --column-count: 6; + } + .has-7-cols-desktop { + --column-count: 7; + } + .has-8-cols-desktop { + --column-count: 8; + } + .has-9-cols-desktop { + --column-count: 9; + } + .has-10-cols-desktop { + --column-count: 10; + } + .has-11-cols-desktop { + --column-count: 11; + } + .has-12-cols-desktop { + --column-count: 12; + } + .has-13-cols-desktop { + --column-count: 13; + } + .has-14-cols-desktop { + --column-count: 14; + } + .has-15-cols-desktop { + --column-count: 15; + } + .has-16-cols-desktop { + --column-count: 16; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-1-cols-desktop-only { + --column-count: 1; + } + .has-2-cols-desktop-only { + --column-count: 2; + } + .has-3-cols-desktop-only { + --column-count: 3; + } + .has-4-cols-desktop-only { + --column-count: 4; + } + .has-5-cols-desktop-only { + --column-count: 5; + } + .has-6-cols-desktop-only { + --column-count: 6; + } + .has-7-cols-desktop-only { + --column-count: 7; + } + .has-8-cols-desktop-only { + --column-count: 8; + } + .has-9-cols-desktop-only { + --column-count: 9; + } + .has-10-cols-desktop-only { + --column-count: 10; + } + .has-11-cols-desktop-only { + --column-count: 11; + } + .has-12-cols-desktop-only { + --column-count: 12; + } + .has-13-cols-desktop-only { + --column-count: 13; + } + .has-14-cols-desktop-only { + --column-count: 14; + } + .has-15-cols-desktop-only { + --column-count: 15; + } + .has-16-cols-desktop-only { + --column-count: 16; + } +} + +@media screen and (min-width: 1216px) { + .has-1-cols-widescreen { + --column-count: 1; + } + .has-2-cols-widescreen { + --column-count: 2; + } + .has-3-cols-widescreen { + --column-count: 3; + } + .has-4-cols-widescreen { + --column-count: 4; + } + .has-5-cols-widescreen { + --column-count: 5; + } + .has-6-cols-widescreen { + --column-count: 6; + } + .has-7-cols-widescreen { + --column-count: 7; + } + .has-8-cols-widescreen { + --column-count: 8; + } + .has-9-cols-widescreen { + --column-count: 9; + } + .has-10-cols-widescreen { + --column-count: 10; + } + .has-11-cols-widescreen { + --column-count: 11; + } + .has-12-cols-widescreen { + --column-count: 12; + } + .has-13-cols-widescreen { + --column-count: 13; + } + .has-14-cols-widescreen { + --column-count: 14; + } + .has-15-cols-widescreen { + --column-count: 15; + } + .has-16-cols-widescreen { + --column-count: 16; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-1-cols-widescreen-only { + --column-count: 1; + } + .has-2-cols-widescreen-only { + --column-count: 2; + } + .has-3-cols-widescreen-only { + --column-count: 3; + } + .has-4-cols-widescreen-only { + --column-count: 4; + } + .has-5-cols-widescreen-only { + --column-count: 5; + } + .has-6-cols-widescreen-only { + --column-count: 6; + } + .has-7-cols-widescreen-only { + --column-count: 7; + } + .has-8-cols-widescreen-only { + --column-count: 8; + } + .has-9-cols-widescreen-only { + --column-count: 9; + } + .has-10-cols-widescreen-only { + --column-count: 10; + } + .has-11-cols-widescreen-only { + --column-count: 11; + } + .has-12-cols-widescreen-only { + --column-count: 12; + } + .has-13-cols-widescreen-only { + --column-count: 13; + } + .has-14-cols-widescreen-only { + --column-count: 14; + } + .has-15-cols-widescreen-only { + --column-count: 15; + } + .has-16-cols-widescreen-only { + --column-count: 16; + } +} + +@media screen and (min-width: 1408px) { + .has-1-cols-fullhd { + --column-count: 1; + } + .has-2-cols-fullhd { + --column-count: 2; + } + .has-3-cols-fullhd { + --column-count: 3; + } + .has-4-cols-fullhd { + --column-count: 4; + } + .has-5-cols-fullhd { + --column-count: 5; + } + .has-6-cols-fullhd { + --column-count: 6; + } + .has-7-cols-fullhd { + --column-count: 7; + } + .has-8-cols-fullhd { + --column-count: 8; + } + .has-9-cols-fullhd { + --column-count: 9; + } + .has-10-cols-fullhd { + --column-count: 10; + } + .has-11-cols-fullhd { + --column-count: 11; + } + .has-12-cols-fullhd { + --column-count: 12; + } + .has-13-cols-fullhd { + --column-count: 13; + } + .has-14-cols-fullhd { + --column-count: 14; + } + .has-15-cols-fullhd { + --column-count: 15; + } + .has-16-cols-fullhd { + --column-count: 16; + } +} + .tile { align-items: stretch; display: block; diff --git a/docs/cyp/grid/grid.html b/docs/cyp/grid/grid.html new file mode 100644 index 000000000..46c8c6988 --- /dev/null +++ b/docs/cyp/grid/grid.html @@ -0,0 +1,27 @@ +--- +layout: cypress +title: Grid/Grid +--- + +
+
#1
+
#2
+
#3
+
#4
+
#5
+
#6
+
#7
+
#8
+
#9
+
#10
+
#11
+
#12
+
#13
+
#14
+
#15
+
#16
+
#17
+
#18
+
#19
+
#20
+
\ No newline at end of file diff --git a/sass/grid/_all.sass b/sass/grid/_all.sass index 0b5ed3109..c4e718018 100644 --- a/sass/grid/_all.sass +++ b/sass/grid/_all.sass @@ -2,4 +2,5 @@ @charset "utf-8" @import "columns" +@import "grid" @import "tiles" diff --git a/sass/grid/grid.sass b/sass/grid/grid.sass new file mode 100644 index 000000000..f533cbd66 --- /dev/null +++ b/sass/grid/grid.sass @@ -0,0 +1,105 @@ +$max-column-count: 16 + +.grid + --grid-gap: 1.5rem + --column-count: 12 + --grid-gap-count: calc(var(--column-count) - 1) + --grid-column-min: calc(calc(100% / var(--column-count)) - calc(var(--grid-gap-count) / var(--column-count) * var(--grid-column-gap, var(--grid-gap)))) + --cell-column-span: 1 + --cell-row-span: 1 + display: grid + grid-gap: var(--grid-gap) + grid-column-gap: var(--grid-column-gap, var(--grid-gap)) + grid-row-gap: var(--grid-row-gap, var(--grid-gap)) + grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min), 1fr)) + grid-template-rows: auto + +mobile + --column-count: 2 + +tablet + --column-count: 4 + +desktop + --column-count: 8 + +widescreen + --column-count: 12 + +fullhd + --column-count: 16 + +=cell-properties($suffix: '') + @for $i from 1 through $max-column-count + $name: $i + $suffix + &.is-col-start-#{$name} + --cell-column-start: #{$i} + &.is-col-from-end-#{$name} + --cell-column-start: #{$i * -1} + &.is-col-span-#{$name} + --cell-column-span: #{$i} + &.is-row-start-#{$name} + --cell-row-start: #{$i} + &.is-row-from-end-#{$name} + --cell-row-start: #{$i * -1} + &.is-row-span-#{$name} + --cell-row-span: #{$i} + +.cell + background-color: lavender + border-radius: 1em + grid-column-end: span var(--cell-column-span) + grid-column-start: var(--cell-column-start) + grid-row-end: span var(--cell-row-span) + grid-row-start: var(--cell-row-start) + padding: 0.75em + // Sizes + &.is-col-start-end + --cell-column-start: -1 + &.is-row-start-end + --cell-row-start: -1 + +cell-properties + +mobile + +cell-properties('-mobile') + +tablet + +cell-properties('-tablet') + +tablet-only + +cell-properties('-tablet-only') + +desktop + +cell-properties('-desktop') + +desktop-only + +cell-properties('-desktop-only') + +widescreen + +cell-properties('-widescreen') + +widescreen-only + +cell-properties('-widescreen-only') + +fullhd + +cell-properties('-fullhd') + +=grid-properties($suffix: '') + .has-1-cols#{$suffix} + --column-count: 1 + @for $i from 2 through $max-column-count + .has-#{$i}-cols#{$suffix} + --column-count: #{$i} + ++grid-properties + ++mobile + +grid-properties('-mobile') + ++tablet + +grid-properties('-tablet') + ++tablet-only + +grid-properties('-tablet-only') + ++desktop + +grid-properties('-desktop') + ++desktop-only + +grid-properties('-desktop-only') + ++widescreen + +grid-properties('-widescreen') + ++widescreen-only + +grid-properties('-widescreen-only') + ++fullhd + +grid-properties('-fullhd')