@layer layouts { /* ---- grid assets */ div-grid{ width: 100%; position: relative; gap: attr(gap type( | ), 0px) } div-grid>div-container>div-grid{ height:100% } div-grid[axis~="x"][cols~="auto"] { display: flex; flex-wrap: wrap; } div-grid[axis~="y"][cols~="auto"] { display: grid; grid-template-columns: repeat( auto-fit, minmax(275px, 1fr) ); grid-auto-rows: 1px; } div-grid[axis~="y"]:not([cols~="auto"])[cols] { display: grid; grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="auto"]{ display: grid; } div-grid[axis~="auto"]:not([cols~="auto"]) { grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="auto"]:not([rows~="auto"]) { grid-template-rows: repeat( var(--rows,auto), 1fr) } div-grid[axis~="auto"]:not([cols])>* { grid-column: span var(--x-steps,12) / span var(--x-steps,12) } /* ---- grid cells */ div-grid[axis~="x"] > *, div-grid[axis~="y"] > * { margin: 0; flex-grow: 1; } div-grid[axis~="auto"]:not([cols~="auto"])>[size*="x-"]{ /* grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , calc( var(--cols) - 1 ) ) / span var(--x-steps, null ) */ grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , var(--cols) ) / span var(--x-steps, null ) } div-grid[axis~="auto"]:not([rows~="auto"])>[size*="y-"]{ grid-row: auto / span clamp( 0, var( --y-steps ), var(--rows) ) } [stretch-end] > div > *{ min-height: 100%; } /* ---- custs options */ @media only screen and (min-width: 1920px) { div-grid[rows~="l-0"] { display: none } div-grid[rows~="l-1"] { --rows: 1 } div-grid[rows~="l-11"] { --rows: 11 } div-grid[rows~="l-21"] { --rows: 21 } div-grid[rows~="l-31"] { --rows: 31 } div-grid[rows~="l-41"] { --rows: 41 } div-grid[rows~="l-51"] { --rows: 51 } div-grid[rows~="l-61"] { --rows: 61 } div-grid[rows~="l-71"] { --rows: 71 } div-grid[rows~="l-81"] { --rows: 81 } div-grid[rows~="l-91"] { --rows: 91 } div-grid[rows~="l-2"] { --rows: 2 } div-grid[rows~="l-12"] { --rows: 12 } div-grid[rows~="l-22"] { --rows: 22 } div-grid[rows~="l-32"] { --rows: 32 } div-grid[rows~="l-42"] { --rows: 42 } div-grid[rows~="l-52"] { --rows: 52 } div-grid[rows~="l-62"] { --rows: 62 } div-grid[rows~="l-72"] { --rows: 72 } div-grid[rows~="l-82"] { --rows: 82 } div-grid[rows~="l-92"] { --rows: 92 } div-grid[rows~="l-3"] { --rows: 3 } div-grid[rows~="l-13"] { --rows: 13 } div-grid[rows~="l-23"] { --rows: 23 } div-grid[rows~="l-33"] { --rows: 33 } div-grid[rows~="l-43"] { --rows: 43 } div-grid[rows~="l-53"] { --rows: 53 } div-grid[rows~="l-63"] { --rows: 63 } div-grid[rows~="l-73"] { --rows: 73 } div-grid[rows~="l-83"] { --rows: 83 } div-grid[rows~="l-93"] { --rows: 93 } div-grid[rows~="l-4"] { --rows: 4 } div-grid[rows~="l-14"] { --rows: 14 } div-grid[rows~="l-24"] { --rows: 24 } div-grid[rows~="l-34"] { --rows: 34 } div-grid[rows~="l-44"] { --rows: 44 } div-grid[rows~="l-54"] { --rows: 54 } div-grid[rows~="l-64"] { --rows: 64 } div-grid[rows~="l-74"] { --rows: 74 } div-grid[rows~="l-84"] { --rows: 84 } div-grid[rows~="l-94"] { --rows: 94 } div-grid[rows~="l-5"] { --rows: 5 } div-grid[rows~="l-15"] { --rows: 15 } div-grid[rows~="l-25"] { --rows: 25 } div-grid[rows~="l-35"] { --rows: 35 } div-grid[rows~="l-45"] { --rows: 45 } div-grid[rows~="l-55"] { --rows: 55 } div-grid[rows~="l-65"] { --rows: 65 } div-grid[rows~="l-75"] { --rows: 75 } div-grid[rows~="l-85"] { --rows: 85 } div-grid[rows~="l-95"] { --rows: 95 } div-grid[rows~="l-6"] { --rows: 6 } div-grid[rows~="l-16"] { --rows: 16 } div-grid[rows~="l-26"] { --rows: 26 } div-grid[rows~="l-36"] { --rows: 36 } div-grid[rows~="l-46"] { --rows: 46 } div-grid[rows~="l-56"] { --rows: 56 } div-grid[rows~="l-66"] { --rows: 66 } div-grid[rows~="l-76"] { --rows: 76 } div-grid[rows~="l-86"] { --rows: 86 } div-grid[rows~="l-96"] { --rows: 96 } div-grid[rows~="l-7"] { --rows: 7 } div-grid[rows~="l-17"] { --rows: 17 } div-grid[rows~="l-27"] { --rows: 27 } div-grid[rows~="l-37"] { --rows: 37 } div-grid[rows~="l-47"] { --rows: 47 } div-grid[rows~="l-57"] { --rows: 57 } div-grid[rows~="l-67"] { --rows: 67 } div-grid[rows~="l-77"] { --rows: 77 } div-grid[rows~="l-87"] { --rows: 87 } div-grid[rows~="l-97"] { --rows: 97 } div-grid[rows~="l-8"] { --rows: 8 } div-grid[rows~="l-18"] { --rows: 18 } div-grid[rows~="l-28"] { --rows: 28 } div-grid[rows~="l-38"] { --rows: 38 } div-grid[rows~="l-48"] { --rows: 48 } div-grid[rows~="l-58"] { --rows: 58 } div-grid[rows~="l-68"] { --rows: 68 } div-grid[rows~="l-78"] { --rows: 78 } div-grid[rows~="l-88"] { --rows: 88 } div-grid[rows~="l-98"] { --rows: 98 } div-grid[rows~="l-9"] { --rows: 9 } div-grid[rows~="l-19"] { --rows: 19 } div-grid[rows~="l-29"] { --rows: 29 } div-grid[rows~="l-39"] { --rows: 39 } div-grid[rows~="l-49"] { --rows: 49 } div-grid[rows~="l-59"] { --rows: 59 } div-grid[rows~="l-69"] { --rows: 69 } div-grid[rows~="l-79"] { --rows: 79 } div-grid[rows~="l-89"] { --rows: 89 } div-grid[rows~="l-99"] { --rows: 99 } div-grid[rows~="l-10"] { --rows: 10 } div-grid[rows~="l-20"] { --rows: 20 } div-grid[rows~="l-30"] { --rows: 30 } div-grid[rows~="l-40"] { --rows: 40 } div-grid[rows~="l-50"] { --rows: 50 } div-grid[rows~="l-60"] { --rows: 60 } div-grid[rows~="l-70"] { --rows: 70 } div-grid[rows~="l-80"] { --rows: 80 } div-grid[rows~="l-90"] { --rows: 90 } div-grid[rows~="l-100"] { --rows: 100 } div-grid[cols~="m-0"] { display: none } div-grid[cols~="l-1"] { --cols: 1 } div-grid[cols~="l-11"] { --cols: 11 } div-grid[cols~="l-21"] { --cols: 21 } div-grid[cols~="l-31"] { --cols: 31 } div-grid[cols~="l-41"] { --cols: 41 } div-grid[cols~="l-51"] { --cols: 51 } div-grid[cols~="l-61"] { --cols: 61 } div-grid[cols~="l-71"] { --cols: 71 } div-grid[cols~="l-81"] { --cols: 81 } div-grid[cols~="l-91"] { --cols: 91 } div-grid[cols~="l-2"] { --cols: 2 } div-grid[cols~="l-12"] { --cols: 12 } div-grid[cols~="l-22"] { --cols: 22 } div-grid[cols~="l-32"] { --cols: 32 } div-grid[cols~="l-42"] { --cols: 42 } div-grid[cols~="l-52"] { --cols: 52 } div-grid[cols~="l-62"] { --cols: 62 } div-grid[cols~="l-72"] { --cols: 72 } div-grid[cols~="l-82"] { --cols: 82 } div-grid[cols~="l-92"] { --cols: 92 } div-grid[cols~="l-3"] { --cols: 3 } div-grid[cols~="l-13"] { --cols: 13 } div-grid[cols~="l-23"] { --cols: 23 } div-grid[cols~="l-33"] { --cols: 33 } div-grid[cols~="l-43"] { --cols: 43 } div-grid[cols~="l-53"] { --cols: 53 } div-grid[cols~="l-63"] { --cols: 63 } div-grid[cols~="l-73"] { --cols: 73 } div-grid[cols~="l-83"] { --cols: 83 } div-grid[cols~="l-93"] { --cols: 93 } div-grid[cols~="l-4"] { --cols: 4 } div-grid[cols~="l-14"] { --cols: 14 } div-grid[cols~="l-24"] { --cols: 24 } div-grid[cols~="l-34"] { --cols: 34 } div-grid[cols~="l-44"] { --cols: 44 } div-grid[cols~="l-54"] { --cols: 54 } div-grid[cols~="l-64"] { --cols: 64 } div-grid[cols~="l-74"] { --cols: 74 } div-grid[cols~="l-84"] { --cols: 84 } div-grid[cols~="l-94"] { --cols: 94 } div-grid[cols~="l-5"] { --cols: 5 } div-grid[cols~="l-15"] { --cols: 15 } div-grid[cols~="l-25"] { --cols: 25 } div-grid[cols~="l-35"] { --cols: 35 } div-grid[cols~="l-45"] { --cols: 45 } div-grid[cols~="l-55"] { --cols: 55 } div-grid[cols~="l-65"] { --cols: 65 } div-grid[cols~="l-75"] { --cols: 75 } div-grid[cols~="l-85"] { --cols: 85 } div-grid[cols~="l-95"] { --cols: 95 } div-grid[cols~="l-6"] { --cols: 6 } div-grid[cols~="l-16"] { --cols: 16 } div-grid[cols~="l-26"] { --cols: 26 } div-grid[cols~="l-36"] { --cols: 36 } div-grid[cols~="l-46"] { --cols: 46 } div-grid[cols~="l-56"] { --cols: 56 } div-grid[cols~="l-66"] { --cols: 66 } div-grid[cols~="l-76"] { --cols: 76 } div-grid[cols~="l-86"] { --cols: 86 } div-grid[cols~="l-96"] { --cols: 96 } div-grid[cols~="l-7"] { --cols: 7 } div-grid[cols~="l-17"] { --cols: 17 } div-grid[cols~="l-27"] { --cols: 27 } div-grid[cols~="l-37"] { --cols: 37 } div-grid[cols~="l-47"] { --cols: 47 } div-grid[cols~="l-57"] { --cols: 57 } div-grid[cols~="l-67"] { --cols: 67 } div-grid[cols~="l-77"] { --cols: 77 } div-grid[cols~="l-87"] { --cols: 87 } div-grid[cols~="l-97"] { --cols: 97 } div-grid[cols~="l-8"] { --cols: 8 } div-grid[cols~="l-18"] { --cols: 18 } div-grid[cols~="l-28"] { --cols: 28 } div-grid[cols~="l-38"] { --cols: 38 } div-grid[cols~="l-48"] { --cols: 48 } div-grid[cols~="l-58"] { --cols: 58 } div-grid[cols~="l-68"] { --cols: 68 } div-grid[cols~="l-78"] { --cols: 78 } div-grid[cols~="l-88"] { --cols: 88 } div-grid[cols~="l-98"] { --cols: 98 } div-grid[cols~="l-9"] { --cols: 9 } div-grid[cols~="l-19"] { --cols: 19 } div-grid[cols~="l-29"] { --cols: 29 } div-grid[cols~="l-39"] { --cols: 39 } div-grid[cols~="l-49"] { --cols: 49 } div-grid[cols~="l-59"] { --cols: 59 } div-grid[cols~="l-69"] { --cols: 69 } div-grid[cols~="l-79"] { --cols: 79 } div-grid[cols~="l-89"] { --cols: 89 } div-grid[cols~="l-99"] { --cols: 99 } div-grid[cols~="l-10"] { --cols: 10 } div-grid[cols~="l-20"] { --cols: 20 } div-grid[cols~="l-30"] { --cols: 30 } div-grid[cols~="l-40"] { --cols: 40 } div-grid[cols~="l-50"] { --cols: 50 } div-grid[cols~="l-60"] { --cols: 60 } div-grid[cols~="l-70"] { --cols: 70 } div-grid[cols~="l-80"] { --cols: 80 } div-grid[cols~="l-90"] { --cols: 90 } div-grid[cols~="l-100"] { --cols: 100 } div-grid>[size~="x-l-0"] { display: none } div-grid>[size~="x-l-1"] { --x-steps: 1 } div-grid>[size~="x-l-11"] { --x-steps: 11 } div-grid>[size~="x-l-21"] { --x-steps: 21 } div-grid>[size~="x-l-31"] { --x-steps: 31 } div-grid>[size~="x-l-41"] { --x-steps: 41 } div-grid>[size~="x-l-51"] { --x-steps: 51 } div-grid>[size~="x-l-61"] { --x-steps: 61 } div-grid>[size~="x-l-71"] { --x-steps: 71 } div-grid>[size~="x-l-81"] { --x-steps: 81 } div-grid>[size~="x-l-91"] { --x-steps: 91 } div-grid>[size~="x-l-2"] { --x-steps: 2 } div-grid>[size~="x-l-12"] { --x-steps: 12 } div-grid>[size~="x-l-22"] { --x-steps: 22 } div-grid>[size~="x-l-32"] { --x-steps: 32 } div-grid>[size~="x-l-42"] { --x-steps: 42 } div-grid>[size~="x-l-52"] { --x-steps: 52 } div-grid>[size~="x-l-62"] { --x-steps: 62 } div-grid>[size~="x-l-72"] { --x-steps: 72 } div-grid>[size~="x-l-82"] { --x-steps: 82 } div-grid>[size~="x-l-92"] { --x-steps: 92 } div-grid>[size~="x-l-3"] { --x-steps: 3 } div-grid>[size~="x-l-13"] { --x-steps: 13 } div-grid>[size~="x-l-23"] { --x-steps: 23 } div-grid>[size~="x-l-33"] { --x-steps: 33 } div-grid>[size~="x-l-43"] { --x-steps: 43 } div-grid>[size~="x-l-53"] { --x-steps: 53 } div-grid>[size~="x-l-63"] { --x-steps: 63 } div-grid>[size~="x-l-73"] { --x-steps: 73 } div-grid>[size~="x-l-83"] { --x-steps: 83 } div-grid>[size~="x-l-93"] { --x-steps: 93 } div-grid>[size~="x-l-4"] { --x-steps: 4 } div-grid>[size~="x-l-14"] { --x-steps: 14 } div-grid>[size~="x-l-24"] { --x-steps: 24 } div-grid>[size~="x-l-34"] { --x-steps: 34 } div-grid>[size~="x-l-44"] { --x-steps: 44 } div-grid>[size~="x-l-54"] { --x-steps: 54 } div-grid>[size~="x-l-64"] { --x-steps: 64 } div-grid>[size~="x-l-74"] { --x-steps: 74 } div-grid>[size~="x-l-84"] { --x-steps: 84 } div-grid>[size~="x-l-94"] { --x-steps: 94 } div-grid>[size~="x-l-5"] { --x-steps: 5 } div-grid>[size~="x-l-15"] { --x-steps: 15 } div-grid>[size~="x-l-25"] { --x-steps: 25 } div-grid>[size~="x-l-35"] { --x-steps: 35 } div-grid>[size~="x-l-45"] { --x-steps: 45 } div-grid>[size~="x-l-55"] { --x-steps: 55 } div-grid>[size~="x-l-65"] { --x-steps: 65 } div-grid>[size~="x-l-75"] { --x-steps: 75 } div-grid>[size~="x-l-85"] { --x-steps: 85 } div-grid>[size~="x-l-95"] { --x-steps: 95 } div-grid>[size~="x-l-6"] { --x-steps: 6 } div-grid>[size~="x-l-16"] { --x-steps: 16 } div-grid>[size~="x-l-26"] { --x-steps: 26 } div-grid>[size~="x-l-36"] { --x-steps: 36 } div-grid>[size~="x-l-46"] { --x-steps: 46 } div-grid>[size~="x-l-56"] { --x-steps: 56 } div-grid>[size~="x-l-66"] { --x-steps: 66 } div-grid>[size~="x-l-76"] { --x-steps: 76 } div-grid>[size~="x-l-86"] { --x-steps: 86 } div-grid>[size~="x-l-96"] { --x-steps: 96 } div-grid>[size~="x-l-7"] { --x-steps: 7 } div-grid>[size~="x-l-17"] { --x-steps: 17 } div-grid>[size~="x-l-27"] { --x-steps: 27 } div-grid>[size~="x-l-37"] { --x-steps: 37 } div-grid>[size~="x-l-47"] { --x-steps: 47 } div-grid>[size~="x-l-57"] { --x-steps: 57 } div-grid>[size~="x-l-67"] { --x-steps: 67 } div-grid>[size~="x-l-77"] { --x-steps: 77 } div-grid>[size~="x-l-87"] { --x-steps: 87 } div-grid>[size~="x-l-97"] { --x-steps: 97 } div-grid>[size~="x-l-8"] { --x-steps: 8 } div-grid>[size~="x-l-18"] { --x-steps: 18 } div-grid>[size~="x-l-28"] { --x-steps: 28 } div-grid>[size~="x-l-38"] { --x-steps: 38 } div-grid>[size~="x-l-48"] { --x-steps: 48 } div-grid>[size~="x-l-58"] { --x-steps: 58 } div-grid>[size~="x-l-68"] { --x-steps: 68 } div-grid>[size~="x-l-78"] { --x-steps: 78 } div-grid>[size~="x-l-88"] { --x-steps: 88 } div-grid>[size~="x-l-98"] { --x-steps: 98 } div-grid>[size~="x-l-9"] { --x-steps: 9 } div-grid>[size~="x-l-19"] { --x-steps: 19 } div-grid>[size~="x-l-29"] { --x-steps: 29 } div-grid>[size~="x-l-39"] { --x-steps: 39 } div-grid>[size~="x-l-49"] { --x-steps: 49 } div-grid>[size~="x-l-59"] { --x-steps: 59 } div-grid>[size~="x-l-69"] { --x-steps: 69 } div-grid>[size~="x-l-79"] { --x-steps: 79 } div-grid>[size~="x-l-89"] { --x-steps: 89 } div-grid>[size~="x-l-99"] { --x-steps: 99 } div-grid>[size~="x-l-10"] { --x-steps: 10 } div-grid>[size~="x-l-20"] { --x-steps: 20 } div-grid>[size~="x-l-30"] { --x-steps: 30 } div-grid>[size~="x-l-40"] { --x-steps: 40 } div-grid>[size~="x-l-50"] { --x-steps: 50 } div-grid>[size~="x-l-60"] { --x-steps: 60 } div-grid>[size~="x-l-70"] { --x-steps: 70 } div-grid>[size~="x-l-80"] { --x-steps: 80 } div-grid>[size~="x-l-90"] { --x-steps: 90 } div-grid>[size~="x-l-100"] { --x-steps: 100 } div-grid>[size~="y-l-0"] { display: none } div-grid>[size~="y-l-1"] { --y-steps: 1 } div-grid>[size~="y-l-11"] { --y-steps: 11 } div-grid>[size~="y-l-21"] { --y-steps: 21 } div-grid>[size~="y-l-31"] { --y-steps: 31 } div-grid>[size~="y-l-41"] { --y-steps: 41 } div-grid>[size~="y-l-51"] { --y-steps: 51 } div-grid>[size~="y-l-61"] { --y-steps: 61 } div-grid>[size~="y-l-71"] { --y-steps: 71 } div-grid>[size~="y-l-81"] { --y-steps: 81 } div-grid>[size~="y-l-91"] { --y-steps: 91 } div-grid>[size~="y-l-2"] { --y-steps: 2 } div-grid>[size~="y-l-12"] { --y-steps: 12 } div-grid>[size~="y-l-22"] { --y-steps: 22 } div-grid>[size~="y-l-32"] { --y-steps: 32 } div-grid>[size~="y-l-42"] { --y-steps: 42 } div-grid>[size~="y-l-52"] { --y-steps: 52 } div-grid>[size~="y-l-62"] { --y-steps: 62 } div-grid>[size~="y-l-72"] { --y-steps: 72 } div-grid>[size~="y-l-82"] { --y-steps: 82 } div-grid>[size~="y-l-92"] { --y-steps: 92 } div-grid>[size~="y-l-3"] { --y-steps: 3 } div-grid>[size~="y-l-13"] { --y-steps: 13 } div-grid>[size~="y-l-23"] { --y-steps: 23 } div-grid>[size~="y-l-33"] { --y-steps: 33 } div-grid>[size~="y-l-43"] { --y-steps: 43 } div-grid>[size~="y-l-53"] { --y-steps: 53 } div-grid>[size~="y-l-63"] { --y-steps: 63 } div-grid>[size~="y-l-73"] { --y-steps: 73 } div-grid>[size~="y-l-83"] { --y-steps: 83 } div-grid>[size~="y-l-93"] { --y-steps: 93 } div-grid>[size~="y-l-4"] { --y-steps: 4 } div-grid>[size~="y-l-14"] { --y-steps: 14 } div-grid>[size~="y-l-24"] { --y-steps: 24 } div-grid>[size~="y-l-34"] { --y-steps: 34 } div-grid>[size~="y-l-44"] { --y-steps: 44 } div-grid>[size~="y-l-54"] { --y-steps: 54 } div-grid>[size~="y-l-64"] { --y-steps: 64 } div-grid>[size~="y-l-74"] { --y-steps: 74 } div-grid>[size~="y-l-84"] { --y-steps: 84 } div-grid>[size~="y-l-94"] { --y-steps: 94 } div-grid>[size~="y-l-5"] { --y-steps: 5 } div-grid>[size~="y-l-15"] { --y-steps: 15 } div-grid>[size~="y-l-25"] { --y-steps: 25 } div-grid>[size~="y-l-35"] { --y-steps: 35 } div-grid>[size~="y-l-45"] { --y-steps: 45 } div-grid>[size~="y-l-55"] { --y-steps: 55 } div-grid>[size~="y-l-65"] { --y-steps: 65 } div-grid>[size~="y-l-75"] { --y-steps: 75 } div-grid>[size~="y-l-85"] { --y-steps: 85 } div-grid>[size~="y-l-95"] { --y-steps: 95 } div-grid>[size~="y-l-6"] { --y-steps: 6 } div-grid>[size~="y-l-16"] { --y-steps: 16 } div-grid>[size~="y-l-26"] { --y-steps: 26 } div-grid>[size~="y-l-36"] { --y-steps: 36 } div-grid>[size~="y-l-46"] { --y-steps: 46 } div-grid>[size~="y-l-56"] { --y-steps: 56 } div-grid>[size~="y-l-66"] { --y-steps: 66 } div-grid>[size~="y-l-76"] { --y-steps: 76 } div-grid>[size~="y-l-86"] { --y-steps: 86 } div-grid>[size~="y-l-96"] { --y-steps: 96 } div-grid>[size~="y-l-7"] { --y-steps: 7 } div-grid>[size~="y-l-17"] { --y-steps: 17 } div-grid>[size~="y-l-27"] { --y-steps: 27 } div-grid>[size~="y-l-37"] { --y-steps: 37 } div-grid>[size~="y-l-47"] { --y-steps: 47 } div-grid>[size~="y-l-57"] { --y-steps: 57 } div-grid>[size~="y-l-67"] { --y-steps: 67 } div-grid>[size~="y-l-77"] { --y-steps: 77 } div-grid>[size~="y-l-87"] { --y-steps: 87 } div-grid>[size~="y-l-97"] { --y-steps: 97 } div-grid>[size~="y-l-8"] { --y-steps: 8 } div-grid>[size~="y-l-18"] { --y-steps: 18 } div-grid>[size~="y-l-28"] { --y-steps: 28 } div-grid>[size~="y-l-38"] { --y-steps: 38 } div-grid>[size~="y-l-48"] { --y-steps: 48 } div-grid>[size~="y-l-58"] { --y-steps: 58 } div-grid>[size~="y-l-68"] { --y-steps: 68 } div-grid>[size~="y-l-78"] { --y-steps: 78 } div-grid>[size~="y-l-88"] { --y-steps: 88 } div-grid>[size~="y-l-98"] { --y-steps: 98 } div-grid>[size~="y-l-9"] { --y-steps: 9 } div-grid>[size~="y-l-19"] { --y-steps: 19 } div-grid>[size~="y-l-29"] { --y-steps: 29 } div-grid>[size~="y-l-39"] { --y-steps: 39 } div-grid>[size~="y-l-49"] { --y-steps: 49 } div-grid>[size~="y-l-59"] { --y-steps: 59 } div-grid>[size~="y-l-69"] { --y-steps: 69 } div-grid>[size~="y-l-79"] { --y-steps: 79 } div-grid>[size~="y-l-89"] { --y-steps: 89 } div-grid>[size~="y-l-99"] { --y-steps: 99 } div-grid>[size~="y-l-10"] { --y-steps: 10 } div-grid>[size~="y-l-20"] { --y-steps: 20 } div-grid>[size~="y-l-30"] { --y-steps: 30 } div-grid>[size~="y-l-40"] { --y-steps: 40 } div-grid>[size~="y-l-50"] { --y-steps: 50 } div-grid>[size~="y-l-60"] { --y-steps: 60 } div-grid>[size~="y-l-70"] { --y-steps: 70 } div-grid>[size~="y-l-80"] { --y-steps: 80 } div-grid>[size~="y-l-90"] { --y-steps: 90 } div-grid>[size~="y-l-100"] { --y-steps: 100 } } @media only screen and (min-width: 755px) and (max-width : 1920px) { div-grid[rows~="m-0"] { display: none } div-grid[rows~="m-1"] { --rows: 1 } div-grid[rows~="m-11"] { --rows: 11 } div-grid[rows~="m-21"] { --rows: 21 } div-grid[rows~="m-31"] { --rows: 31 } div-grid[rows~="m-41"] { --rows: 41 } div-grid[rows~="m-51"] { --rows: 51 } div-grid[rows~="m-61"] { --rows: 61 } div-grid[rows~="m-71"] { --rows: 71 } div-grid[rows~="m-81"] { --rows: 81 } div-grid[rows~="m-91"] { --rows: 91 } div-grid[rows~="m-2"] { --rows: 2 } div-grid[rows~="m-12"] { --rows: 12 } div-grid[rows~="m-22"] { --rows: 22 } div-grid[rows~="m-32"] { --rows: 32 } div-grid[rows~="m-42"] { --rows: 42 } div-grid[rows~="m-52"] { --rows: 52 } div-grid[rows~="m-62"] { --rows: 62 } div-grid[rows~="m-72"] { --rows: 72 } div-grid[rows~="m-82"] { --rows: 82 } div-grid[rows~="m-92"] { --rows: 92 } div-grid[rows~="m-3"] { --rows: 3 } div-grid[rows~="m-13"] { --rows: 13 } div-grid[rows~="m-23"] { --rows: 23 } div-grid[rows~="m-33"] { --rows: 33 } div-grid[rows~="m-43"] { --rows: 43 } div-grid[rows~="m-53"] { --rows: 53 } div-grid[rows~="m-63"] { --rows: 63 } div-grid[rows~="m-73"] { --rows: 73 } div-grid[rows~="m-83"] { --rows: 83 } div-grid[rows~="m-93"] { --rows: 93 } div-grid[rows~="m-4"] { --rows: 4 } div-grid[rows~="m-14"] { --rows: 14 } div-grid[rows~="m-24"] { --rows: 24 } div-grid[rows~="m-34"] { --rows: 34 } div-grid[rows~="m-44"] { --rows: 44 } div-grid[rows~="m-54"] { --rows: 54 } div-grid[rows~="m-64"] { --rows: 64 } div-grid[rows~="m-74"] { --rows: 74 } div-grid[rows~="m-84"] { --rows: 84 } div-grid[rows~="m-94"] { --rows: 94 } div-grid[rows~="m-5"] { --rows: 5 } div-grid[rows~="m-15"] { --rows: 15 } div-grid[rows~="m-25"] { --rows: 25 } div-grid[rows~="m-35"] { --rows: 35 } div-grid[rows~="m-45"] { --rows: 45 } div-grid[rows~="m-55"] { --rows: 55 } div-grid[rows~="m-65"] { --rows: 65 } div-grid[rows~="m-75"] { --rows: 75 } div-grid[rows~="m-85"] { --rows: 85 } div-grid[rows~="m-95"] { --rows: 95 } div-grid[rows~="m-6"] { --rows: 6 } div-grid[rows~="m-16"] { --rows: 16 } div-grid[rows~="m-26"] { --rows: 26 } div-grid[rows~="m-36"] { --rows: 36 } div-grid[rows~="m-46"] { --rows: 46 } div-grid[rows~="m-56"] { --rows: 56 } div-grid[rows~="m-66"] { --rows: 66 } div-grid[rows~="m-76"] { --rows: 76 } div-grid[rows~="m-86"] { --rows: 86 } div-grid[rows~="m-96"] { --rows: 96 } div-grid[rows~="m-7"] { --rows: 7 } div-grid[rows~="m-17"] { --rows: 17 } div-grid[rows~="m-27"] { --rows: 27 } div-grid[rows~="m-37"] { --rows: 37 } div-grid[rows~="m-47"] { --rows: 47 } div-grid[rows~="m-57"] { --rows: 57 } div-grid[rows~="m-67"] { --rows: 67 } div-grid[rows~="m-77"] { --rows: 77 } div-grid[rows~="m-87"] { --rows: 87 } div-grid[rows~="m-97"] { --rows: 97 } div-grid[rows~="m-8"] { --rows: 8 } div-grid[rows~="m-18"] { --rows: 18 } div-grid[rows~="m-28"] { --rows: 28 } div-grid[rows~="m-38"] { --rows: 38 } div-grid[rows~="m-48"] { --rows: 48 } div-grid[rows~="m-58"] { --rows: 58 } div-grid[rows~="m-68"] { --rows: 68 } div-grid[rows~="m-78"] { --rows: 78 } div-grid[rows~="m-88"] { --rows: 88 } div-grid[rows~="m-98"] { --rows: 98 } div-grid[rows~="m-9"] { --rows: 9 } div-grid[rows~="m-19"] { --rows: 19 } div-grid[rows~="m-29"] { --rows: 29 } div-grid[rows~="m-39"] { --rows: 39 } div-grid[rows~="m-49"] { --rows: 49 } div-grid[rows~="m-59"] { --rows: 59 } div-grid[rows~="m-69"] { --rows: 69 } div-grid[rows~="m-79"] { --rows: 79 } div-grid[rows~="m-89"] { --rows: 89 } div-grid[rows~="m-99"] { --rows: 99 } div-grid[rows~="m-10"] { --rows: 10 } div-grid[rows~="m-20"] { --rows: 20 } div-grid[rows~="m-30"] { --rows: 30 } div-grid[rows~="m-40"] { --rows: 40 } div-grid[rows~="m-50"] { --rows: 50 } div-grid[rows~="m-60"] { --rows: 60 } div-grid[rows~="m-70"] { --rows: 70 } div-grid[rows~="m-80"] { --rows: 80 } div-grid[rows~="m-90"] { --rows: 90 } div-grid[rows~="m-100"] { --rows: 100 } div-grid[cols~="m-0"] { display: none } div-grid[cols~="m-1"] { --cols: 1 } div-grid[cols~="m-11"] { --cols: 11 } div-grid[cols~="m-21"] { --cols: 21 } div-grid[cols~="m-31"] { --cols: 31 } div-grid[cols~="m-41"] { --cols: 41 } div-grid[cols~="m-51"] { --cols: 51 } div-grid[cols~="m-61"] { --cols: 61 } div-grid[cols~="m-71"] { --cols: 71 } div-grid[cols~="m-81"] { --cols: 81 } div-grid[cols~="m-91"] { --cols: 91 } div-grid[cols~="m-2"] { --cols: 2 } div-grid[cols~="m-12"] { --cols: 12 } div-grid[cols~="m-22"] { --cols: 22 } div-grid[cols~="m-32"] { --cols: 32 } div-grid[cols~="m-42"] { --cols: 42 } div-grid[cols~="m-52"] { --cols: 52 } div-grid[cols~="m-62"] { --cols: 62 } div-grid[cols~="m-72"] { --cols: 72 } div-grid[cols~="m-82"] { --cols: 82 } div-grid[cols~="m-92"] { --cols: 92 } div-grid[cols~="m-3"] { --cols: 3 } div-grid[cols~="m-13"] { --cols: 13 } div-grid[cols~="m-23"] { --cols: 23 } div-grid[cols~="m-33"] { --cols: 33 } div-grid[cols~="m-43"] { --cols: 43 } div-grid[cols~="m-53"] { --cols: 53 } div-grid[cols~="m-63"] { --cols: 63 } div-grid[cols~="m-73"] { --cols: 73 } div-grid[cols~="m-83"] { --cols: 83 } div-grid[cols~="m-93"] { --cols: 93 } div-grid[cols~="m-4"] { --cols: 4 } div-grid[cols~="m-14"] { --cols: 14 } div-grid[cols~="m-24"] { --cols: 24 } div-grid[cols~="m-34"] { --cols: 34 } div-grid[cols~="m-44"] { --cols: 44 } div-grid[cols~="m-54"] { --cols: 54 } div-grid[cols~="m-64"] { --cols: 64 } div-grid[cols~="m-74"] { --cols: 74 } div-grid[cols~="m-84"] { --cols: 84 } div-grid[cols~="m-94"] { --cols: 94 } div-grid[cols~="m-5"] { --cols: 5 } div-grid[cols~="m-15"] { --cols: 15 } div-grid[cols~="m-25"] { --cols: 25 } div-grid[cols~="m-35"] { --cols: 35 } div-grid[cols~="m-45"] { --cols: 45 } div-grid[cols~="m-55"] { --cols: 55 } div-grid[cols~="m-65"] { --cols: 65 } div-grid[cols~="m-75"] { --cols: 75 } div-grid[cols~="m-85"] { --cols: 85 } div-grid[cols~="m-95"] { --cols: 95 } div-grid[cols~="m-6"] { --cols: 6 } div-grid[cols~="m-16"] { --cols: 16 } div-grid[cols~="m-26"] { --cols: 26 } div-grid[cols~="m-36"] { --cols: 36 } div-grid[cols~="m-46"] { --cols: 46 } div-grid[cols~="m-56"] { --cols: 56 } div-grid[cols~="m-66"] { --cols: 66 } div-grid[cols~="m-76"] { --cols: 76 } div-grid[cols~="m-86"] { --cols: 86 } div-grid[cols~="m-96"] { --cols: 96 } div-grid[cols~="m-7"] { --cols: 7 } div-grid[cols~="m-17"] { --cols: 17 } div-grid[cols~="m-27"] { --cols: 27 } div-grid[cols~="m-37"] { --cols: 37 } div-grid[cols~="m-47"] { --cols: 47 } div-grid[cols~="m-57"] { --cols: 57 } div-grid[cols~="m-67"] { --cols: 67 } div-grid[cols~="m-77"] { --cols: 77 } div-grid[cols~="m-87"] { --cols: 87 } div-grid[cols~="m-97"] { --cols: 97 } div-grid[cols~="m-8"] { --cols: 8 } div-grid[cols~="m-18"] { --cols: 18 } div-grid[cols~="m-28"] { --cols: 28 } div-grid[cols~="m-38"] { --cols: 38 } div-grid[cols~="m-48"] { --cols: 48 } div-grid[cols~="m-58"] { --cols: 58 } div-grid[cols~="m-68"] { --cols: 68 } div-grid[cols~="m-78"] { --cols: 78 } div-grid[cols~="m-88"] { --cols: 88 } div-grid[cols~="m-98"] { --cols: 98 } div-grid[cols~="m-9"] { --cols: 9 } div-grid[cols~="m-19"] { --cols: 19 } div-grid[cols~="m-29"] { --cols: 29 } div-grid[cols~="m-39"] { --cols: 39 } div-grid[cols~="m-49"] { --cols: 49 } div-grid[cols~="m-59"] { --cols: 59 } div-grid[cols~="m-69"] { --cols: 69 } div-grid[cols~="m-79"] { --cols: 79 } div-grid[cols~="m-89"] { --cols: 89 } div-grid[cols~="m-99"] { --cols: 99 } div-grid[cols~="m-10"] { --cols: 10 } div-grid[cols~="m-20"] { --cols: 20 } div-grid[cols~="m-30"] { --cols: 30 } div-grid[cols~="m-40"] { --cols: 40 } div-grid[cols~="m-50"] { --cols: 50 } div-grid[cols~="m-60"] { --cols: 60 } div-grid[cols~="m-70"] { --cols: 70 } div-grid[cols~="m-80"] { --cols: 80 } div-grid[cols~="m-90"] { --cols: 90 } div-grid[cols~="m-100"] { --cols: 100 } div-grid>[size~="x-m-0"] { display: none } div-grid>[size~="x-m-1"] { --x-steps: 1 } div-grid>[size~="x-m-11"] { --x-steps: 11 } div-grid>[size~="x-m-21"] { --x-steps: 21 } div-grid>[size~="x-m-31"] { --x-steps: 31 } div-grid>[size~="x-m-41"] { --x-steps: 41 } div-grid>[size~="x-m-51"] { --x-steps: 51 } div-grid>[size~="x-m-61"] { --x-steps: 61 } div-grid>[size~="x-m-71"] { --x-steps: 71 } div-grid>[size~="x-m-81"] { --x-steps: 81 } div-grid>[size~="x-m-91"] { --x-steps: 91 } div-grid>[size~="x-m-2"] { --x-steps: 2 } div-grid>[size~="x-m-12"] { --x-steps: 12 } div-grid>[size~="x-m-22"] { --x-steps: 22 } div-grid>[size~="x-m-32"] { --x-steps: 32 } div-grid>[size~="x-m-42"] { --x-steps: 42 } div-grid>[size~="x-m-52"] { --x-steps: 52 } div-grid>[size~="x-m-62"] { --x-steps: 62 } div-grid>[size~="x-m-72"] { --x-steps: 72 } div-grid>[size~="x-m-82"] { --x-steps: 82 } div-grid>[size~="x-m-92"] { --x-steps: 92 } div-grid>[size~="x-m-3"] { --x-steps: 3 } div-grid>[size~="x-m-13"] { --x-steps: 13 } div-grid>[size~="x-m-23"] { --x-steps: 23 } div-grid>[size~="x-m-33"] { --x-steps: 33 } div-grid>[size~="x-m-43"] { --x-steps: 43 } div-grid>[size~="x-m-53"] { --x-steps: 53 } div-grid>[size~="x-m-63"] { --x-steps: 63 } div-grid>[size~="x-m-73"] { --x-steps: 73 } div-grid>[size~="x-m-83"] { --x-steps: 83 } div-grid>[size~="x-m-93"] { --x-steps: 93 } div-grid>[size~="x-m-4"] { --x-steps: 4 } div-grid>[size~="x-m-14"] { --x-steps: 14 } div-grid>[size~="x-m-24"] { --x-steps: 24 } div-grid>[size~="x-m-34"] { --x-steps: 34 } div-grid>[size~="x-m-44"] { --x-steps: 44 } div-grid>[size~="x-m-54"] { --x-steps: 54 } div-grid>[size~="x-m-64"] { --x-steps: 64 } div-grid>[size~="x-m-74"] { --x-steps: 74 } div-grid>[size~="x-m-84"] { --x-steps: 84 } div-grid>[size~="x-m-94"] { --x-steps: 94 } div-grid>[size~="x-m-5"] { --x-steps: 5 } div-grid>[size~="x-m-15"] { --x-steps: 15 } div-grid>[size~="x-m-25"] { --x-steps: 25 } div-grid>[size~="x-m-35"] { --x-steps: 35 } div-grid>[size~="x-m-45"] { --x-steps: 45 } div-grid>[size~="x-m-55"] { --x-steps: 55 } div-grid>[size~="x-m-65"] { --x-steps: 65 } div-grid>[size~="x-m-75"] { --x-steps: 75 } div-grid>[size~="x-m-85"] { --x-steps: 85 } div-grid>[size~="x-m-95"] { --x-steps: 95 } div-grid>[size~="x-m-6"] { --x-steps: 6 } div-grid>[size~="x-m-16"] { --x-steps: 16 } div-grid>[size~="x-m-26"] { --x-steps: 26 } div-grid>[size~="x-m-36"] { --x-steps: 36 } div-grid>[size~="x-m-46"] { --x-steps: 46 } div-grid>[size~="x-m-56"] { --x-steps: 56 } div-grid>[size~="x-m-66"] { --x-steps: 66 } div-grid>[size~="x-m-76"] { --x-steps: 76 } div-grid>[size~="x-m-86"] { --x-steps: 86 } div-grid>[size~="x-m-96"] { --x-steps: 96 } div-grid>[size~="x-m-7"] { --x-steps: 7 } div-grid>[size~="x-m-17"] { --x-steps: 17 } div-grid>[size~="x-m-27"] { --x-steps: 27 } div-grid>[size~="x-m-37"] { --x-steps: 37 } div-grid>[size~="x-m-47"] { --x-steps: 47 } div-grid>[size~="x-m-57"] { --x-steps: 57 } div-grid>[size~="x-m-67"] { --x-steps: 67 } div-grid>[size~="x-m-77"] { --x-steps: 77 } div-grid>[size~="x-m-87"] { --x-steps: 87 } div-grid>[size~="x-m-97"] { --x-steps: 97 } div-grid>[size~="x-m-8"] { --x-steps: 8 } div-grid>[size~="x-m-18"] { --x-steps: 18 } div-grid>[size~="x-m-28"] { --x-steps: 28 } div-grid>[size~="x-m-38"] { --x-steps: 38 } div-grid>[size~="x-m-48"] { --x-steps: 48 } div-grid>[size~="x-m-58"] { --x-steps: 58 } div-grid>[size~="x-m-68"] { --x-steps: 68 } div-grid>[size~="x-m-78"] { --x-steps: 78 } div-grid>[size~="x-m-88"] { --x-steps: 88 } div-grid>[size~="x-m-98"] { --x-steps: 98 } div-grid>[size~="x-m-9"] { --x-steps: 9 } div-grid>[size~="x-m-19"] { --x-steps: 19 } div-grid>[size~="x-m-29"] { --x-steps: 29 } div-grid>[size~="x-m-39"] { --x-steps: 39 } div-grid>[size~="x-m-49"] { --x-steps: 49 } div-grid>[size~="x-m-59"] { --x-steps: 59 } div-grid>[size~="x-m-69"] { --x-steps: 69 } div-grid>[size~="x-m-79"] { --x-steps: 79 } div-grid>[size~="x-m-89"] { --x-steps: 89 } div-grid>[size~="x-m-99"] { --x-steps: 99 } div-grid>[size~="x-m-10"] { --x-steps: 10 } div-grid>[size~="x-m-20"] { --x-steps: 20 } div-grid>[size~="x-m-30"] { --x-steps: 30 } div-grid>[size~="x-m-40"] { --x-steps: 40 } div-grid>[size~="x-m-50"] { --x-steps: 50 } div-grid>[size~="x-m-60"] { --x-steps: 60 } div-grid>[size~="x-m-70"] { --x-steps: 70 } div-grid>[size~="x-m-80"] { --x-steps: 80 } div-grid>[size~="x-m-90"] { --x-steps: 90 } div-grid>[size~="x-m-100"] { --x-steps: 100 } div-grid>[size~="y-m-0"] { display: none } div-grid>[size~="y-m-1"] { --y-steps: 1 } div-grid>[size~="y-m-11"] { --y-steps: 11 } div-grid>[size~="y-m-21"] { --y-steps: 21 } div-grid>[size~="y-m-31"] { --y-steps: 31 } div-grid>[size~="y-m-41"] { --y-steps: 41 } div-grid>[size~="y-m-51"] { --y-steps: 51 } div-grid>[size~="y-m-61"] { --y-steps: 61 } div-grid>[size~="y-m-71"] { --y-steps: 71 } div-grid>[size~="y-m-81"] { --y-steps: 81 } div-grid>[size~="y-m-91"] { --y-steps: 91 } div-grid>[size~="y-m-2"] { --y-steps: 2 } div-grid>[size~="y-m-12"] { --y-steps: 12 } div-grid>[size~="y-m-22"] { --y-steps: 22 } div-grid>[size~="y-m-32"] { --y-steps: 32 } div-grid>[size~="y-m-42"] { --y-steps: 42 } div-grid>[size~="y-m-52"] { --y-steps: 52 } div-grid>[size~="y-m-62"] { --y-steps: 62 } div-grid>[size~="y-m-72"] { --y-steps: 72 } div-grid>[size~="y-m-82"] { --y-steps: 82 } div-grid>[size~="y-m-92"] { --y-steps: 92 } div-grid>[size~="y-m-3"] { --y-steps: 3 } div-grid>[size~="y-m-13"] { --y-steps: 13 } div-grid>[size~="y-m-23"] { --y-steps: 23 } div-grid>[size~="y-m-33"] { --y-steps: 33 } div-grid>[size~="y-m-43"] { --y-steps: 43 } div-grid>[size~="y-m-53"] { --y-steps: 53 } div-grid>[size~="y-m-63"] { --y-steps: 63 } div-grid>[size~="y-m-73"] { --y-steps: 73 } div-grid>[size~="y-m-83"] { --y-steps: 83 } div-grid>[size~="y-m-93"] { --y-steps: 93 } div-grid>[size~="y-m-4"] { --y-steps: 4 } div-grid>[size~="y-m-14"] { --y-steps: 14 } div-grid>[size~="y-m-24"] { --y-steps: 24 } div-grid>[size~="y-m-34"] { --y-steps: 34 } div-grid>[size~="y-m-44"] { --y-steps: 44 } div-grid>[size~="y-m-54"] { --y-steps: 54 } div-grid>[size~="y-m-64"] { --y-steps: 64 } div-grid>[size~="y-m-74"] { --y-steps: 74 } div-grid>[size~="y-m-84"] { --y-steps: 84 } div-grid>[size~="y-m-94"] { --y-steps: 94 } div-grid>[size~="y-m-5"] { --y-steps: 5 } div-grid>[size~="y-m-15"] { --y-steps: 15 } div-grid>[size~="y-m-25"] { --y-steps: 25 } div-grid>[size~="y-m-35"] { --y-steps: 35 } div-grid>[size~="y-m-45"] { --y-steps: 45 } div-grid>[size~="y-m-55"] { --y-steps: 55 } div-grid>[size~="y-m-65"] { --y-steps: 65 } div-grid>[size~="y-m-75"] { --y-steps: 75 } div-grid>[size~="y-m-85"] { --y-steps: 85 } div-grid>[size~="y-m-95"] { --y-steps: 95 } div-grid>[size~="y-m-6"] { --y-steps: 6 } div-grid>[size~="y-m-16"] { --y-steps: 16 } div-grid>[size~="y-m-26"] { --y-steps: 26 } div-grid>[size~="y-m-36"] { --y-steps: 36 } div-grid>[size~="y-m-46"] { --y-steps: 46 } div-grid>[size~="y-m-56"] { --y-steps: 56 } div-grid>[size~="y-m-66"] { --y-steps: 66 } div-grid>[size~="y-m-76"] { --y-steps: 76 } div-grid>[size~="y-m-86"] { --y-steps: 86 } div-grid>[size~="y-m-96"] { --y-steps: 96 } div-grid>[size~="y-m-7"] { --y-steps: 7 } div-grid>[size~="y-m-17"] { --y-steps: 17 } div-grid>[size~="y-m-27"] { --y-steps: 27 } div-grid>[size~="y-m-37"] { --y-steps: 37 } div-grid>[size~="y-m-47"] { --y-steps: 47 } div-grid>[size~="y-m-57"] { --y-steps: 57 } div-grid>[size~="y-m-67"] { --y-steps: 67 } div-grid>[size~="y-m-77"] { --y-steps: 77 } div-grid>[size~="y-m-87"] { --y-steps: 87 } div-grid>[size~="y-m-97"] { --y-steps: 97 } div-grid>[size~="y-m-8"] { --y-steps: 8 } div-grid>[size~="y-m-18"] { --y-steps: 18 } div-grid>[size~="y-m-28"] { --y-steps: 28 } div-grid>[size~="y-m-38"] { --y-steps: 38 } div-grid>[size~="y-m-48"] { --y-steps: 48 } div-grid>[size~="y-m-58"] { --y-steps: 58 } div-grid>[size~="y-m-68"] { --y-steps: 68 } div-grid>[size~="y-m-78"] { --y-steps: 78 } div-grid>[size~="y-m-88"] { --y-steps: 88 } div-grid>[size~="y-m-98"] { --y-steps: 98 } div-grid>[size~="y-m-9"] { --y-steps: 9 } div-grid>[size~="y-m-19"] { --y-steps: 19 } div-grid>[size~="y-m-29"] { --y-steps: 29 } div-grid>[size~="y-m-39"] { --y-steps: 39 } div-grid>[size~="y-m-49"] { --y-steps: 49 } div-grid>[size~="y-m-59"] { --y-steps: 59 } div-grid>[size~="y-m-69"] { --y-steps: 69 } div-grid>[size~="y-m-79"] { --y-steps: 79 } div-grid>[size~="y-m-89"] { --y-steps: 89 } div-grid>[size~="y-m-99"] { --y-steps: 99 } div-grid>[size~="y-m-10"] { --y-steps: 10 } div-grid>[size~="y-m-20"] { --y-steps: 20 } div-grid>[size~="y-m-30"] { --y-steps: 30 } div-grid>[size~="y-m-40"] { --y-steps: 40 } div-grid>[size~="y-m-50"] { --y-steps: 50 } div-grid>[size~="y-m-60"] { --y-steps: 60 } div-grid>[size~="y-m-70"] { --y-steps: 70 } div-grid>[size~="y-m-80"] { --y-steps: 80 } div-grid>[size~="y-m-90"] { --y-steps: 90 } div-grid>[size~="y-m-100"] { --y-steps: 100 } } @media only screen and (max-width: 755px) { div-grid[rows~="m-0"] { display: none } div-grid[rows~="s-1"] { --rows: 1 } div-grid[rows~="s-11"] { --rows: 11 } div-grid[rows~="s-21"] { --rows: 21 } div-grid[rows~="s-31"] { --rows: 31 } div-grid[rows~="s-41"] { --rows: 41 } div-grid[rows~="s-51"] { --rows: 51 } div-grid[rows~="s-61"] { --rows: 61 } div-grid[rows~="s-71"] { --rows: 71 } div-grid[rows~="s-81"] { --rows: 81 } div-grid[rows~="s-91"] { --rows: 91 } div-grid[rows~="s-2"] { --rows: 2 } div-grid[rows~="s-12"] { --rows: 12 } div-grid[rows~="s-22"] { --rows: 22 } div-grid[rows~="s-32"] { --rows: 32 } div-grid[rows~="s-42"] { --rows: 42 } div-grid[rows~="s-52"] { --rows: 52 } div-grid[rows~="s-62"] { --rows: 62 } div-grid[rows~="s-72"] { --rows: 72 } div-grid[rows~="s-82"] { --rows: 82 } div-grid[rows~="s-92"] { --rows: 92 } div-grid[rows~="s-3"] { --rows: 3 } div-grid[rows~="s-13"] { --rows: 13 } div-grid[rows~="s-23"] { --rows: 23 } div-grid[rows~="s-33"] { --rows: 33 } div-grid[rows~="s-43"] { --rows: 43 } div-grid[rows~="s-53"] { --rows: 53 } div-grid[rows~="s-63"] { --rows: 63 } div-grid[rows~="s-73"] { --rows: 73 } div-grid[rows~="s-83"] { --rows: 83 } div-grid[rows~="s-93"] { --rows: 93 } div-grid[rows~="s-4"] { --rows: 4 } div-grid[rows~="s-14"] { --rows: 14 } div-grid[rows~="s-24"] { --rows: 24 } div-grid[rows~="s-34"] { --rows: 34 } div-grid[rows~="s-44"] { --rows: 44 } div-grid[rows~="s-54"] { --rows: 54 } div-grid[rows~="s-64"] { --rows: 64 } div-grid[rows~="s-74"] { --rows: 74 } div-grid[rows~="s-84"] { --rows: 84 } div-grid[rows~="s-94"] { --rows: 94 } div-grid[rows~="s-5"] { --rows: 5 } div-grid[rows~="s-15"] { --rows: 15 } div-grid[rows~="s-25"] { --rows: 25 } div-grid[rows~="s-35"] { --rows: 35 } div-grid[rows~="s-45"] { --rows: 45 } div-grid[rows~="s-55"] { --rows: 55 } div-grid[rows~="s-65"] { --rows: 65 } div-grid[rows~="s-75"] { --rows: 75 } div-grid[rows~="s-85"] { --rows: 85 } div-grid[rows~="s-95"] { --rows: 95 } div-grid[rows~="s-6"] { --rows: 6 } div-grid[rows~="s-16"] { --rows: 16 } div-grid[rows~="s-26"] { --rows: 26 } div-grid[rows~="s-36"] { --rows: 36 } div-grid[rows~="s-46"] { --rows: 46 } div-grid[rows~="s-56"] { --rows: 56 } div-grid[rows~="s-66"] { --rows: 66 } div-grid[rows~="s-76"] { --rows: 76 } div-grid[rows~="s-86"] { --rows: 86 } div-grid[rows~="s-96"] { --rows: 96 } div-grid[rows~="s-7"] { --rows: 7 } div-grid[rows~="s-17"] { --rows: 17 } div-grid[rows~="s-27"] { --rows: 27 } div-grid[rows~="s-37"] { --rows: 37 } div-grid[rows~="s-47"] { --rows: 47 } div-grid[rows~="s-57"] { --rows: 57 } div-grid[rows~="s-67"] { --rows: 67 } div-grid[rows~="s-77"] { --rows: 77 } div-grid[rows~="s-87"] { --rows: 87 } div-grid[rows~="s-97"] { --rows: 97 } div-grid[rows~="s-8"] { --rows: 8 } div-grid[rows~="s-18"] { --rows: 18 } div-grid[rows~="s-28"] { --rows: 28 } div-grid[rows~="s-38"] { --rows: 38 } div-grid[rows~="s-48"] { --rows: 48 } div-grid[rows~="s-58"] { --rows: 58 } div-grid[rows~="s-68"] { --rows: 68 } div-grid[rows~="s-78"] { --rows: 78 } div-grid[rows~="s-88"] { --rows: 88 } div-grid[rows~="s-98"] { --rows: 98 } div-grid[rows~="s-9"] { --rows: 9 } div-grid[rows~="s-19"] { --rows: 19 } div-grid[rows~="s-29"] { --rows: 29 } div-grid[rows~="s-39"] { --rows: 39 } div-grid[rows~="s-49"] { --rows: 49 } div-grid[rows~="s-59"] { --rows: 59 } div-grid[rows~="s-69"] { --rows: 69 } div-grid[rows~="s-79"] { --rows: 79 } div-grid[rows~="s-89"] { --rows: 89 } div-grid[rows~="s-99"] { --rows: 99 } div-grid[rows~="s-10"] { --rows: 10 } div-grid[rows~="s-20"] { --rows: 20 } div-grid[rows~="s-30"] { --rows: 30 } div-grid[rows~="s-40"] { --rows: 40 } div-grid[rows~="s-50"] { --rows: 50 } div-grid[rows~="s-60"] { --rows: 60 } div-grid[rows~="s-70"] { --rows: 70 } div-grid[rows~="s-80"] { --rows: 80 } div-grid[rows~="s-90"] { --rows: 90 } div-grid[rows~="s-100"] { --rows: 100 } div-grid[cols~="s-0"] { display: none } div-grid[cols~="s-1"] { --cols: 1 } div-grid[cols~="s-11"] { --cols: 11 } div-grid[cols~="s-21"] { --cols: 21 } div-grid[cols~="s-31"] { --cols: 31 } div-grid[cols~="s-41"] { --cols: 41 } div-grid[cols~="s-51"] { --cols: 51 } div-grid[cols~="s-61"] { --cols: 61 } div-grid[cols~="s-71"] { --cols: 71 } div-grid[cols~="s-81"] { --cols: 81 } div-grid[cols~="s-91"] { --cols: 91 } div-grid[cols~="s-2"] { --cols: 2 } div-grid[cols~="s-12"] { --cols: 12 } div-grid[cols~="s-22"] { --cols: 22 } div-grid[cols~="s-32"] { --cols: 32 } div-grid[cols~="s-42"] { --cols: 42 } div-grid[cols~="s-52"] { --cols: 52 } div-grid[cols~="s-62"] { --cols: 62 } div-grid[cols~="s-72"] { --cols: 72 } div-grid[cols~="s-82"] { --cols: 82 } div-grid[cols~="s-92"] { --cols: 92 } div-grid[cols~="s-3"] { --cols: 3 } div-grid[cols~="s-13"] { --cols: 13 } div-grid[cols~="s-23"] { --cols: 23 } div-grid[cols~="s-33"] { --cols: 33 } div-grid[cols~="s-43"] { --cols: 43 } div-grid[cols~="s-53"] { --cols: 53 } div-grid[cols~="s-63"] { --cols: 63 } div-grid[cols~="s-73"] { --cols: 73 } div-grid[cols~="s-83"] { --cols: 83 } div-grid[cols~="s-93"] { --cols: 93 } div-grid[cols~="s-4"] { --cols: 4 } div-grid[cols~="s-14"] { --cols: 14 } div-grid[cols~="s-24"] { --cols: 24 } div-grid[cols~="s-34"] { --cols: 34 } div-grid[cols~="s-44"] { --cols: 44 } div-grid[cols~="s-54"] { --cols: 54 } div-grid[cols~="s-64"] { --cols: 64 } div-grid[cols~="s-74"] { --cols: 74 } div-grid[cols~="s-84"] { --cols: 84 } div-grid[cols~="s-94"] { --cols: 94 } div-grid[cols~="s-5"] { --cols: 5 } div-grid[cols~="s-15"] { --cols: 15 } div-grid[cols~="s-25"] { --cols: 25 } div-grid[cols~="s-35"] { --cols: 35 } div-grid[cols~="s-45"] { --cols: 45 } div-grid[cols~="s-55"] { --cols: 55 } div-grid[cols~="s-65"] { --cols: 65 } div-grid[cols~="s-75"] { --cols: 75 } div-grid[cols~="s-85"] { --cols: 85 } div-grid[cols~="s-95"] { --cols: 95 } div-grid[cols~="s-6"] { --cols: 6 } div-grid[cols~="s-16"] { --cols: 16 } div-grid[cols~="s-26"] { --cols: 26 } div-grid[cols~="s-36"] { --cols: 36 } div-grid[cols~="s-46"] { --cols: 46 } div-grid[cols~="s-56"] { --cols: 56 } div-grid[cols~="s-66"] { --cols: 66 } div-grid[cols~="s-76"] { --cols: 76 } div-grid[cols~="s-86"] { --cols: 86 } div-grid[cols~="s-96"] { --cols: 96 } div-grid[cols~="s-7"] { --cols: 7 } div-grid[cols~="s-17"] { --cols: 17 } div-grid[cols~="s-27"] { --cols: 27 } div-grid[cols~="s-37"] { --cols: 37 } div-grid[cols~="s-47"] { --cols: 47 } div-grid[cols~="s-57"] { --cols: 57 } div-grid[cols~="s-67"] { --cols: 67 } div-grid[cols~="s-77"] { --cols: 77 } div-grid[cols~="s-87"] { --cols: 87 } div-grid[cols~="s-97"] { --cols: 97 } div-grid[cols~="s-8"] { --cols: 8 } div-grid[cols~="s-18"] { --cols: 18 } div-grid[cols~="s-28"] { --cols: 28 } div-grid[cols~="s-38"] { --cols: 38 } div-grid[cols~="s-48"] { --cols: 48 } div-grid[cols~="s-58"] { --cols: 58 } div-grid[cols~="s-68"] { --cols: 68 } div-grid[cols~="s-78"] { --cols: 78 } div-grid[cols~="s-88"] { --cols: 88 } div-grid[cols~="s-98"] { --cols: 98 } div-grid[cols~="s-9"] { --cols: 9 } div-grid[cols~="s-19"] { --cols: 19 } div-grid[cols~="s-29"] { --cols: 29 } div-grid[cols~="s-39"] { --cols: 39 } div-grid[cols~="s-49"] { --cols: 49 } div-grid[cols~="s-59"] { --cols: 59 } div-grid[cols~="s-69"] { --cols: 69 } div-grid[cols~="s-79"] { --cols: 79 } div-grid[cols~="s-89"] { --cols: 89 } div-grid[cols~="s-99"] { --cols: 99 } div-grid[cols~="s-10"] { --cols: 10 } div-grid[cols~="s-20"] { --cols: 20 } div-grid[cols~="s-30"] { --cols: 30 } div-grid[cols~="s-40"] { --cols: 40 } div-grid[cols~="s-50"] { --cols: 50 } div-grid[cols~="s-60"] { --cols: 60 } div-grid[cols~="s-70"] { --cols: 70 } div-grid[cols~="s-80"] { --cols: 80 } div-grid[cols~="s-90"] { --cols: 90 } div-grid[cols~="s-100"] { --cols: 100 } div-grid>[size~="x-s-0"] { display: none } div-grid>[size~="x-s-1"] { --x-steps: 1 } div-grid>[size~="x-s-11"] { --x-steps: 11 } div-grid>[size~="x-s-21"] { --x-steps: 21 } div-grid>[size~="x-s-31"] { --x-steps: 31 } div-grid>[size~="x-s-41"] { --x-steps: 41 } div-grid>[size~="x-s-51"] { --x-steps: 51 } div-grid>[size~="x-s-61"] { --x-steps: 61 } div-grid>[size~="x-s-71"] { --x-steps: 71 } div-grid>[size~="x-s-81"] { --x-steps: 81 } div-grid>[size~="x-s-91"] { --x-steps: 91 } div-grid>[size~="x-s-2"] { --x-steps: 2 } div-grid>[size~="x-s-12"] { --x-steps: 12 } div-grid>[size~="x-s-22"] { --x-steps: 22 } div-grid>[size~="x-s-32"] { --x-steps: 32 } div-grid>[size~="x-s-42"] { --x-steps: 42 } div-grid>[size~="x-s-52"] { --x-steps: 52 } div-grid>[size~="x-s-62"] { --x-steps: 62 } div-grid>[size~="x-s-72"] { --x-steps: 72 } div-grid>[size~="x-s-82"] { --x-steps: 82 } div-grid>[size~="x-s-92"] { --x-steps: 92 } div-grid>[size~="x-s-3"] { --x-steps: 3 } div-grid>[size~="x-s-13"] { --x-steps: 13 } div-grid>[size~="x-s-23"] { --x-steps: 23 } div-grid>[size~="x-s-33"] { --x-steps: 33 } div-grid>[size~="x-s-43"] { --x-steps: 43 } div-grid>[size~="x-s-53"] { --x-steps: 53 } div-grid>[size~="x-s-63"] { --x-steps: 63 } div-grid>[size~="x-s-73"] { --x-steps: 73 } div-grid>[size~="x-s-83"] { --x-steps: 83 } div-grid>[size~="x-s-93"] { --x-steps: 93 } div-grid>[size~="x-s-4"] { --x-steps: 4 } div-grid>[size~="x-s-14"] { --x-steps: 14 } div-grid>[size~="x-s-24"] { --x-steps: 24 } div-grid>[size~="x-s-34"] { --x-steps: 34 } div-grid>[size~="x-s-44"] { --x-steps: 44 } div-grid>[size~="x-s-54"] { --x-steps: 54 } div-grid>[size~="x-s-64"] { --x-steps: 64 } div-grid>[size~="x-s-74"] { --x-steps: 74 } div-grid>[size~="x-s-84"] { --x-steps: 84 } div-grid>[size~="x-s-94"] { --x-steps: 94 } div-grid>[size~="x-s-5"] { --x-steps: 5 } div-grid>[size~="x-s-15"] { --x-steps: 15 } div-grid>[size~="x-s-25"] { --x-steps: 25 } div-grid>[size~="x-s-35"] { --x-steps: 35 } div-grid>[size~="x-s-45"] { --x-steps: 45 } div-grid>[size~="x-s-55"] { --x-steps: 55 } div-grid>[size~="x-s-65"] { --x-steps: 65 } div-grid>[size~="x-s-75"] { --x-steps: 75 } div-grid>[size~="x-s-85"] { --x-steps: 85 } div-grid>[size~="x-s-95"] { --x-steps: 95 } div-grid>[size~="x-s-6"] { --x-steps: 6 } div-grid>[size~="x-s-16"] { --x-steps: 16 } div-grid>[size~="x-s-26"] { --x-steps: 26 } div-grid>[size~="x-s-36"] { --x-steps: 36 } div-grid>[size~="x-s-46"] { --x-steps: 46 } div-grid>[size~="x-s-56"] { --x-steps: 56 } div-grid>[size~="x-s-66"] { --x-steps: 66 } div-grid>[size~="x-s-76"] { --x-steps: 76 } div-grid>[size~="x-s-86"] { --x-steps: 86 } div-grid>[size~="x-s-96"] { --x-steps: 96 } div-grid>[size~="x-s-7"] { --x-steps: 7 } div-grid>[size~="x-s-17"] { --x-steps: 17 } div-grid>[size~="x-s-27"] { --x-steps: 27 } div-grid>[size~="x-s-37"] { --x-steps: 37 } div-grid>[size~="x-s-47"] { --x-steps: 47 } div-grid>[size~="x-s-57"] { --x-steps: 57 } div-grid>[size~="x-s-67"] { --x-steps: 67 } div-grid>[size~="x-s-77"] { --x-steps: 77 } div-grid>[size~="x-s-87"] { --x-steps: 87 } div-grid>[size~="x-s-97"] { --x-steps: 97 } div-grid>[size~="x-s-8"] { --x-steps: 8 } div-grid>[size~="x-s-18"] { --x-steps: 18 } div-grid>[size~="x-s-28"] { --x-steps: 28 } div-grid>[size~="x-s-38"] { --x-steps: 38 } div-grid>[size~="x-s-48"] { --x-steps: 48 } div-grid>[size~="x-s-58"] { --x-steps: 58 } div-grid>[size~="x-s-68"] { --x-steps: 68 } div-grid>[size~="x-s-78"] { --x-steps: 78 } div-grid>[size~="x-s-88"] { --x-steps: 88 } div-grid>[size~="x-s-98"] { --x-steps: 98 } div-grid>[size~="x-s-9"] { --x-steps: 9 } div-grid>[size~="x-s-19"] { --x-steps: 19 } div-grid>[size~="x-s-29"] { --x-steps: 29 } div-grid>[size~="x-s-39"] { --x-steps: 39 } div-grid>[size~="x-s-49"] { --x-steps: 49 } div-grid>[size~="x-s-59"] { --x-steps: 59 } div-grid>[size~="x-s-69"] { --x-steps: 69 } div-grid>[size~="x-s-79"] { --x-steps: 79 } div-grid>[size~="x-s-89"] { --x-steps: 89 } div-grid>[size~="x-s-99"] { --x-steps: 99 } div-grid>[size~="x-s-10"] { --x-steps: 10 } div-grid>[size~="x-s-20"] { --x-steps: 20 } div-grid>[size~="x-s-30"] { --x-steps: 30 } div-grid>[size~="x-s-40"] { --x-steps: 40 } div-grid>[size~="x-s-50"] { --x-steps: 50 } div-grid>[size~="x-s-60"] { --x-steps: 60 } div-grid>[size~="x-s-70"] { --x-steps: 70 } div-grid>[size~="x-s-80"] { --x-steps: 80 } div-grid>[size~="x-s-90"] { --x-steps: 90 } div-grid>[size~="x-s-100"] { --x-steps: 100 } div-grid>[size~="y-l-0"] { display: none } div-grid>[size~="y-s-1"] { --y-steps: 1 } div-grid>[size~="y-s-11"] { --y-steps: 11 } div-grid>[size~="y-s-21"] { --y-steps: 21 } div-grid>[size~="y-s-31"] { --y-steps: 31 } div-grid>[size~="y-s-41"] { --y-steps: 41 } div-grid>[size~="y-s-51"] { --y-steps: 51 } div-grid>[size~="y-s-61"] { --y-steps: 61 } div-grid>[size~="y-s-71"] { --y-steps: 71 } div-grid>[size~="y-s-81"] { --y-steps: 81 } div-grid>[size~="y-s-91"] { --y-steps: 91 } div-grid>[size~="y-s-2"] { --y-steps: 2 } div-grid>[size~="y-s-12"] { --y-steps: 12 } div-grid>[size~="y-s-22"] { --y-steps: 22 } div-grid>[size~="y-s-32"] { --y-steps: 32 } div-grid>[size~="y-s-42"] { --y-steps: 42 } div-grid>[size~="y-s-52"] { --y-steps: 52 } div-grid>[size~="y-s-62"] { --y-steps: 62 } div-grid>[size~="y-s-72"] { --y-steps: 72 } div-grid>[size~="y-s-82"] { --y-steps: 82 } div-grid>[size~="y-s-92"] { --y-steps: 92 } div-grid>[size~="y-s-3"] { --y-steps: 3 } div-grid>[size~="y-s-13"] { --y-steps: 13 } div-grid>[size~="y-s-23"] { --y-steps: 23 } div-grid>[size~="y-s-33"] { --y-steps: 33 } div-grid>[size~="y-s-43"] { --y-steps: 43 } div-grid>[size~="y-s-53"] { --y-steps: 53 } div-grid>[size~="y-s-63"] { --y-steps: 63 } div-grid>[size~="y-s-73"] { --y-steps: 73 } div-grid>[size~="y-s-83"] { --y-steps: 83 } div-grid>[size~="y-s-93"] { --y-steps: 93 } div-grid>[size~="y-s-4"] { --y-steps: 4 } div-grid>[size~="y-s-14"] { --y-steps: 14 } div-grid>[size~="y-s-24"] { --y-steps: 24 } div-grid>[size~="y-s-34"] { --y-steps: 34 } div-grid>[size~="y-s-44"] { --y-steps: 44 } div-grid>[size~="y-s-54"] { --y-steps: 54 } div-grid>[size~="y-s-64"] { --y-steps: 64 } div-grid>[size~="y-s-74"] { --y-steps: 74 } div-grid>[size~="y-s-84"] { --y-steps: 84 } div-grid>[size~="y-s-94"] { --y-steps: 94 } div-grid>[size~="y-s-5"] { --y-steps: 5 } div-grid>[size~="y-s-15"] { --y-steps: 15 } div-grid>[size~="y-s-25"] { --y-steps: 25 } div-grid>[size~="y-s-35"] { --y-steps: 35 } div-grid>[size~="y-s-45"] { --y-steps: 45 } div-grid>[size~="y-s-55"] { --y-steps: 55 } div-grid>[size~="y-s-65"] { --y-steps: 65 } div-grid>[size~="y-s-75"] { --y-steps: 75 } div-grid>[size~="y-s-85"] { --y-steps: 85 } div-grid>[size~="y-s-95"] { --y-steps: 95 } div-grid>[size~="y-s-6"] { --y-steps: 6 } div-grid>[size~="y-s-16"] { --y-steps: 16 } div-grid>[size~="y-s-26"] { --y-steps: 26 } div-grid>[size~="y-s-36"] { --y-steps: 36 } div-grid>[size~="y-s-46"] { --y-steps: 46 } div-grid>[size~="y-s-56"] { --y-steps: 56 } div-grid>[size~="y-s-66"] { --y-steps: 66 } div-grid>[size~="y-s-76"] { --y-steps: 76 } div-grid>[size~="y-s-86"] { --y-steps: 86 } div-grid>[size~="y-s-96"] { --y-steps: 96 } div-grid>[size~="y-s-7"] { --y-steps: 7 } div-grid>[size~="y-s-17"] { --y-steps: 17 } div-grid>[size~="y-s-27"] { --y-steps: 27 } div-grid>[size~="y-s-37"] { --y-steps: 37 } div-grid>[size~="y-s-47"] { --y-steps: 47 } div-grid>[size~="y-s-57"] { --y-steps: 57 } div-grid>[size~="y-s-67"] { --y-steps: 67 } div-grid>[size~="y-s-77"] { --y-steps: 77 } div-grid>[size~="y-s-87"] { --y-steps: 87 } div-grid>[size~="y-s-97"] { --y-steps: 97 } div-grid>[size~="y-s-8"] { --y-steps: 8 } div-grid>[size~="y-s-18"] { --y-steps: 18 } div-grid>[size~="y-s-28"] { --y-steps: 28 } div-grid>[size~="y-s-38"] { --y-steps: 38 } div-grid>[size~="y-s-48"] { --y-steps: 48 } div-grid>[size~="y-s-58"] { --y-steps: 58 } div-grid>[size~="y-s-68"] { --y-steps: 68 } div-grid>[size~="y-s-78"] { --y-steps: 78 } div-grid>[size~="y-s-88"] { --y-steps: 88 } div-grid>[size~="y-s-98"] { --y-steps: 98 } div-grid>[size~="y-s-9"] { --y-steps: 9 } div-grid>[size~="y-s-19"] { --y-steps: 19 } div-grid>[size~="y-s-29"] { --y-steps: 29 } div-grid>[size~="y-s-39"] { --y-steps: 39 } div-grid>[size~="y-s-49"] { --y-steps: 49 } div-grid>[size~="y-s-59"] { --y-steps: 59 } div-grid>[size~="y-s-69"] { --y-steps: 69 } div-grid>[size~="y-s-79"] { --y-steps: 79 } div-grid>[size~="y-s-89"] { --y-steps: 89 } div-grid>[size~="y-s-99"] { --y-steps: 99 } div-grid>[size~="y-s-10"] { --y-steps: 10 } div-grid>[size~="y-s-20"] { --y-steps: 20 } div-grid>[size~="y-s-30"] { --y-steps: 30 } div-grid>[size~="y-s-40"] { --y-steps: 40 } div-grid>[size~="y-s-50"] { --y-steps: 50 } div-grid>[size~="y-s-60"] { --y-steps: 60 } div-grid>[size~="y-s-70"] { --y-steps: 70 } div-grid>[size~="y-s-80"] { --y-steps: 80 } div-grid>[size~="y-s-90"] { --y-steps: 90 } div-grid>[size~="y-s-100"] { --y-steps: 100 } } /* ---- grid debug */ div-grid[axis~="x"][axis~="y"], div-grid[axis~="x"][axis~="auto"], div-grid[axis~="y"][axis~="auto"], div-grid:not([cols]), div-grid:not([rows]), div-grid:not([axis]), div-grid[axis~="x"]:not([cols~="auto"]), div-grid[axis~="y"]:not([rows~="auto"]), div-grid[axis~="auto"][cols~="auto"][rows~="auto"], div-grid[axis~="auto"][cols~="auto"]>[size*="x-"], div-grid[axis~="auto"][rows~="auto"]>[size*="y-"] { /*you have errors on grid!*/ grid-template-columns: repeat(1,100%); grid-template-rows: repeat(1,auto); font-size: 0; color: transparent; } div-grid[axis~="x"][axis~="y"] > *, div-grid[axis~="x"][axis~="auto"] > *, div-grid[axis~="y"][axis~="auto"] > *, div-grid:not([cols]) > *, div-grid:not([rows]) > *, div-grid:not([axis]) > *, div-grid[axis~="x"]:not([cols~="auto"]) > *, div-grid[axis~="y"]:not([rows~="auto"]) > *, div-grid[axis~="auto"][cols~="auto"][rows~="auto"] > *, div-grid[axis~="auto"][cols~="auto"]>[size*="x-"]>*, div-grid[axis~="auto"][rows~="auto"]>[size*="y-"]>* { display: none; } div-grid[axis~="x"][axis~="y"]::before, div-grid[axis~="x"][axis~="auto"]::before, div-grid[axis~="y"][axis~="auto"]::before, div-grid:not([cols])::before, div-grid:not([rows])::before, div-grid:not([axis])::before, div-grid[axis~="x"]:not([cols~="auto"])::before, div-grid[axis~="y"]:not([rows~="auto"])::before, div-grid[axis~="auto"][cols~="auto"][rows~="auto"]::before, div-grid[axis~="auto"][cols~="auto"]>[size*="x-"]::before, div-grid[axis~="auto"][rows~="auto"]>[size*="y-"]::before { display: grid; height: 100%; font-size: 12px; line-height: 25px; margin: 0 auto; text-align: center; align-items: center; color: #dd0000; background: #f8f8f8; } div-grid[axis~="auto"][cols~="auto"][rows~="auto"]::before { content: "SET A COLUMNS AND/OR ROWS (cols-s/m/l-0/12, rows-s/m/l-0/12)"; color: white; background: red; } div-grid:not([cols])::before { content: "SET COLUMNS (cols-auto, cols-s/m/l-0/12)"; color: white; background: red; } div-grid:not([rows])::before { content: "SET ROWS (rows-auto, rows-s/m/l-0-12)"; color: white; background: red; } div-grid:not([axis])::before { content: 'SET A DIRECTION (axis="auto|x|y")'; color: white; background: red; } div-grid[axis~="x"][axis~="auto"], div-grid[axis~="y"][axis~="auto"]{ content: 'CROSS SETTINGS ERROR (axis="auto x/y" is not possible)'; color: white; background: red; } div-grid[axis~="x"][axis~="y"]{ content: 'CROSS SETTINGS ERROR (axis="x y"; suggest: axis="auto")'; color: white; background: red; } div-grid[axis~="x"]:not([cols~="auto"])::before, div-grid[axis~="y"]:not([rows~="auto"])::before{ content: 'CROSS SETTINGS ERROR (axis="x y" + auto, axis="auto" + cols / rows)'; color: white; background: red; } div-grid[axis~="auto"][cols~="auto"]>[size*="x-"]::before{ content: "QUANTITY COLS MISSING (cols-s/m/l-0-12)"; color: white; background: red; } div-grid[axis~="auto"][rows~="auto"]>[size*="y-"]::before{ content: "QUANTITY ROWS MISSING (rows-s/m/l-0-12)"; color: white; background: red; } /* ———— responsive layout axes */ @media only screen and (min-width: 1920px) { div-grid[axis~="l-x"][cols~="auto"] { display: flex; flex-wrap: wrap; } div-grid[axis~="l-y"][cols~="auto"] { display: grid; grid-template-columns: repeat( auto-fit, minmax(275px, 1fr) ); } div-grid[axis~="l-y"]:not([cols~="auto"])[cols] { display: grid; grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="l-auto"] { display: grid; } div-grid[axis~="l-auto"]:not([cols~="auto"]) { grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="l-auto"]:not([rows~="auto"]) { grid-template-rows: repeat( var(--rows,auto), 1fr) } div-grid[axis~="l-auto"]:not([cols])>* { grid-column: span var(--x-steps,12) / span var(--x-steps,12) } div-grid[axis~="l-x"] > *, div-grid[axis~="l-y"] > * { margin: 0; flex-grow: 1; } div-grid[axis~="l-auto"]:not([cols~="auto"])>[size*="x-"] { /* grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , calc( var(--cols) - 1 ) ) / span var(--x-steps, null ) */ grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , var(--cols) ) / span var(--x-steps, null ) } div-grid[axis~="l-auto"]:not([rows~="auto"])>[size*="y-"] { grid-row: auto / span clamp( 0, var( --y-steps ), var(--rows) ) } div-grid[cols~="l-0"], div-grid[rows~="l-0"] { display: none; } } @media only screen and (min-width: 755px) and (max-width: 1920px) { div-grid[axis~="m-x"][cols~="auto"] { display: flex; flex-wrap: wrap; } div-grid[axis~="m-y"][cols~="auto"] { display: grid; grid-template-columns: repeat( auto-fit, minmax(275px, 1fr) ); } div-grid[axis~="m-y"]:not([cols~="auto"])[cols] { display: grid; grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="m-auto"] { display: grid; } div-grid[axis~="m-auto"]:not([cols~="auto"]) { grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="m-auto"]:not([rows~="auto"]) { grid-template-rows: repeat( var(--rows,auto), 1fr) } div-grid[axis~="m-auto"]:not([cols])>* { grid-column: span var(--x-steps,12) / span var(--x-steps,12) } div-grid[axis~="m-x"] > *, div-grid[axis~="m-y"] > * { margin: 0; flex-grow: 1; } div-grid[axis~="m-auto"]:not([cols~="auto"])>[size*="x-"] { /* grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , calc( var(--cols) - 1 ) ) / span var(--x-steps, null ) */ grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , var(--cols) ) / span var(--x-steps, null ) } div-grid[axis~="m-auto"]:not([rows~="auto"])>[size*="y-"] { grid-row: auto / span clamp( 0, var( --y-steps ), var(--rows) ) } div-grid[cols~="m-0"], div-grid[rows~="m-0"] { display: none; } } @media only screen and (max-width: 755px) { div-grid[axis~="s-x"][cols~="auto"] { display: flex; flex-wrap: wrap; } div-grid[axis~="s-y"][cols~="auto"] { display: grid; grid-template-columns: repeat( auto-fit, minmax(275px, 1fr) ); } div-grid[axis~="s-y"]:not([cols~="auto"])[cols] { display: grid; grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="s-auto"] { display: grid; } div-grid[axis~="s-auto"]:not([cols~="auto"]) { grid-template-columns: repeat( var(--cols,auto), 1fr ) } div-grid[axis~="s-auto"]:not([rows~="auto"]) { grid-template-rows: repeat( var(--rows,auto), 1fr) } div-grid[axis~="s-auto"]:not([cols])>* { grid-column: span var(--x-steps,12) / span var(--x-steps,12) } div-grid[axis~="s-x"] > *, div-grid[axis~="s-y"] > * { margin: 0; flex-grow: 1; } div-grid[axis~="s-auto"]:not([cols~="auto"])>[size*="x-"] { /* grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , calc( var(--cols) - 1 ) ) / span var(--x-steps, null ) */ grid-column: span clamp( 0, var( --x-steps, ( var(--cols) ) ) , var(--cols) ) / span var(--x-steps, null ) } div-grid[axis~="s-auto"]:not([rows~="auto"])>[size*="y-"] { grid-row: auto / span clamp( 0, var( --y-steps ), var(--rows) ) } div-grid[cols~="s-0"], div-grid[rows~="s-0"] { display: none; } } }