/* Raster grid subsystem (rsms.me/raster) */
if-grid {
  display: grid;
  --grid-tc: repeat(24, minmax(0, 1fr));
  grid-template-columns: var(--grid-tc);
  --grid-cs: 1; /* column start */
  --grid-ce: -1 /* column end */
}

/* ==========================================================================
   if-cell -- cell or column
   ========================================================================== */

if-grid > if-cell { display: block; appearance: none; -webkit-appearance: none }

if-grid[columns="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
if-grid[columns="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
if-grid[columns="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
if-grid[columns="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
if-grid[columns="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
if-grid[columns="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
if-grid[columns="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
if-grid[columns="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
if-grid[columns="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
if-grid[columns="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
if-grid[columns="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
if-grid[columns="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
if-grid[columns="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
if-grid[columns="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
if-grid[columns="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
if-grid[columns="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
if-grid[columns="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
if-grid[columns="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
if-grid[columns="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
if-grid[columns="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
if-grid[columns="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
if-grid[columns="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
if-grid[columns="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
if-grid[columns="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }

/* span=start... */
if-grid > if-cell[span^="1"] { --grid-cs: 1 }
if-grid > if-cell[span^="2"] { --grid-cs: 2 }
if-grid > if-cell[span^="3"] { --grid-cs: 3 }
if-grid > if-cell[span^="4"] { --grid-cs: 4 }
if-grid > if-cell[span^="5"] { --grid-cs: 5 }
if-grid > if-cell[span^="6"] { --grid-cs: 6 }
if-grid > if-cell[span^="7"] { --grid-cs: 7 }
if-grid > if-cell[span^="8"] { --grid-cs: 8 }
if-grid > if-cell[span^="9"] { --grid-cs: 9 }
if-grid > if-cell[span^="10"] { --grid-cs: 10 }
if-grid > if-cell[span^="11"] { --grid-cs: 11 }
if-grid > if-cell[span^="12"] { --grid-cs: 12 }
if-grid > if-cell[span^="13"] { --grid-cs: 13 }
if-grid > if-cell[span^="14"] { --grid-cs: 14 }
if-grid > if-cell[span^="15"] { --grid-cs: 15 }
if-grid > if-cell[span^="16"] { --grid-cs: 16 }
if-grid > if-cell[span^="17"] { --grid-cs: 17 }
if-grid > if-cell[span^="18"] { --grid-cs: 18 }
if-grid > if-cell[span^="19"] { --grid-cs: 19 }
if-grid > if-cell[span^="20"] { --grid-cs: 20 }
if-grid > if-cell[span^="21"] { --grid-cs: 21 }
if-grid > if-cell[span^="22"] { --grid-cs: 22 }
if-grid > if-cell[span^="23"] { --grid-cs: 23 }
if-grid > if-cell[span^="24"] { --grid-cs: 24 }

/* span=...+width, span=...-end */
if-grid > if-cell[span$="+1"], if-grid > if-cell[span="1"] { --grid-ce: 1 }
if-grid > if-cell[span$="+2"], if-grid > if-cell[span$="-1"], if-grid > if-cell[span="2"] { --grid-ce: 2 }
if-grid > if-cell[span$="+3"], if-grid > if-cell[span$="-2"], if-grid > if-cell[span="3"] { --grid-ce: 3 }
if-grid > if-cell[span$="+4"], if-grid > if-cell[span$="-3"], if-grid > if-cell[span="4"] { --grid-ce: 4 }
if-grid > if-cell[span$="+5"], if-grid > if-cell[span$="-4"], if-grid > if-cell[span="5"] { --grid-ce: 5 }
if-grid > if-cell[span$="+6"], if-grid > if-cell[span$="-5"], if-grid > if-cell[span="6"] { --grid-ce: 6 }
if-grid > if-cell[span$="+7"], if-grid > if-cell[span$="-6"], if-grid > if-cell[span="7"] { --grid-ce: 7 }
if-grid > if-cell[span$="+8"], if-grid > if-cell[span$="-7"], if-grid > if-cell[span="8"] { --grid-ce: 8 }
if-grid > if-cell[span$="+9"], if-grid > if-cell[span$="-8"], if-grid > if-cell[span="9"] { --grid-ce: 9 }
if-grid > if-cell[span$="+10"], if-grid > if-cell[span$="-9"], if-grid > if-cell[span="10"] { --grid-ce: 10 }
if-grid > if-cell[span$="+11"], if-grid > if-cell[span$="-10"], if-grid > if-cell[span="11"] { --grid-ce: 11 }
if-grid > if-cell[span$="+12"], if-grid > if-cell[span$="-11"], if-grid > if-cell[span="12"] { --grid-ce: 12 }
if-grid > if-cell[span$="+13"], if-grid > if-cell[span$="-12"], if-grid > if-cell[span="13"] { --grid-ce: 13 }
if-grid > if-cell[span$="+14"], if-grid > if-cell[span$="-13"], if-grid > if-cell[span="14"] { --grid-ce: 14 }
if-grid > if-cell[span$="+15"], if-grid > if-cell[span$="-14"], if-grid > if-cell[span="15"] { --grid-ce: 15 }
if-grid > if-cell[span$="+16"], if-grid > if-cell[span$="-15"], if-grid > if-cell[span="16"] { --grid-ce: 16 }
if-grid > if-cell[span$="+17"], if-grid > if-cell[span$="-16"], if-grid > if-cell[span="17"] { --grid-ce: 17 }
if-grid > if-cell[span$="+18"], if-grid > if-cell[span$="-17"], if-grid > if-cell[span="18"] { --grid-ce: 18 }
if-grid > if-cell[span$="+19"], if-grid > if-cell[span$="-18"], if-grid > if-cell[span="19"] { --grid-ce: 19 }
if-grid > if-cell[span$="+20"], if-grid > if-cell[span$="-19"], if-grid > if-cell[span="20"] { --grid-ce: 20 }
if-grid > if-cell[span$="+21"], if-grid > if-cell[span$="-20"], if-grid > if-cell[span="21"] { --grid-ce: 21 }
if-grid > if-cell[span$="+22"], if-grid > if-cell[span$="-21"], if-grid > if-cell[span="22"] { --grid-ce: 22 }
if-grid > if-cell[span$="+23"], if-grid > if-cell[span$="-22"], if-grid > if-cell[span="23"] { --grid-ce: 23 }
if-grid > if-cell[span$="+24"], if-grid > if-cell[span$="-23"], if-grid > if-cell[span="24"] { --grid-ce: 24 }
if-grid > if-cell[span$="-24"] { --grid-ce: 25 }

/* connect vars */
if-grid > if-cell[span] { grid-column-end: span var(--grid-ce) }
if-grid > if-cell[span*="+"], if-grid > if-cell[span*="-"], if-grid > if-cell[span*=".."] {
  grid-column-start: var(--grid-cs) }
if-grid > if-cell[span*="-"], if-grid > if-cell[span*=".."] {
  grid-column-end: var(--grid-ce) }
if-grid > if-cell[span="row"] { grid-column: 1 / -1 }

/* ==========================================================================
   for window width => 360
   ========================================================================== */

@media only screen and (min-width: 360px) {
  if-grid[columns-xs="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
  if-grid[columns-xs="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
  if-grid[columns-xs="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
  if-grid[columns-xs="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
  if-grid[columns-xs="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
  if-grid[columns-xs="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
  if-grid[columns-xs="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
  if-grid[columns-xs="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
  if-grid[columns-xs="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
  if-grid[columns-xs="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
  if-grid[columns-xs="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
  if-grid[columns-xs="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
  if-grid[columns-xs="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
  if-grid[columns-xs="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
  if-grid[columns-xs="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
  if-grid[columns-xs="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
  if-grid[columns-xs="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
  if-grid[columns-xs="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
  if-grid[columns-xs="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
  if-grid[columns-xs="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
  if-grid[columns-xs="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
  if-grid[columns-xs="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
  if-grid[columns-xs="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
  if-grid[columns-xs="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }

  /* span-xs=start... */
  if-grid > if-cell[span-xs^="1"] { --grid-cs: 1 }
  if-grid > if-cell[span-xs^="2"] { --grid-cs: 2 }
  if-grid > if-cell[span-xs^="3"] { --grid-cs: 3 }
  if-grid > if-cell[span-xs^="4"] { --grid-cs: 4 }
  if-grid > if-cell[span-xs^="5"] { --grid-cs: 5 }
  if-grid > if-cell[span-xs^="6"] { --grid-cs: 6 }
  if-grid > if-cell[span-xs^="7"] { --grid-cs: 7 }
  if-grid > if-cell[span-xs^="8"] { --grid-cs: 8 }
  if-grid > if-cell[span-xs^="9"] { --grid-cs: 9 }
  if-grid > if-cell[span-xs^="10"] { --grid-cs: 10 }
  if-grid > if-cell[span-xs^="11"] { --grid-cs: 11 }
  if-grid > if-cell[span-xs^="12"] { --grid-cs: 12 }
  if-grid > if-cell[span-xs^="13"] { --grid-cs: 13 }
  if-grid > if-cell[span-xs^="14"] { --grid-cs: 14 }
  if-grid > if-cell[span-xs^="15"] { --grid-cs: 15 }
  if-grid > if-cell[span-xs^="16"] { --grid-cs: 16 }
  if-grid > if-cell[span-xs^="17"] { --grid-cs: 17 }
  if-grid > if-cell[span-xs^="18"] { --grid-cs: 18 }
  if-grid > if-cell[span-xs^="19"] { --grid-cs: 19 }
  if-grid > if-cell[span-xs^="20"] { --grid-cs: 20 }
  if-grid > if-cell[span-xs^="21"] { --grid-cs: 21 }
  if-grid > if-cell[span-xs^="22"] { --grid-cs: 22 }
  if-grid > if-cell[span-xs^="23"] { --grid-cs: 23 }
  if-grid > if-cell[span-xs^="24"] { --grid-cs: 24 }

  /* span-xs=...+width, span-xs=...-end */
  if-grid > if-cell[span-xs$="+1"], if-grid > if-cell[span-xs="1"] { --grid-ce: 1 }
  if-grid > if-cell[span-xs$="+2"], if-grid > if-cell[span-xs$="-1"], if-grid > if-cell[span-xs="2"] { --grid-ce: 2 }
  if-grid > if-cell[span-xs$="+3"], if-grid > if-cell[span-xs$="-2"], if-grid > if-cell[span-xs="3"] { --grid-ce: 3 }
  if-grid > if-cell[span-xs$="+4"], if-grid > if-cell[span-xs$="-3"], if-grid > if-cell[span-xs="4"] { --grid-ce: 4 }
  if-grid > if-cell[span-xs$="+5"], if-grid > if-cell[span-xs$="-4"], if-grid > if-cell[span-xs="5"] { --grid-ce: 5 }
  if-grid > if-cell[span-xs$="+6"], if-grid > if-cell[span-xs$="-5"], if-grid > if-cell[span-xs="6"] { --grid-ce: 6 }
  if-grid > if-cell[span-xs$="+7"], if-grid > if-cell[span-xs$="-6"], if-grid > if-cell[span-xs="7"] { --grid-ce: 7 }
  if-grid > if-cell[span-xs$="+8"], if-grid > if-cell[span-xs$="-7"], if-grid > if-cell[span-xs="8"] { --grid-ce: 8 }
  if-grid > if-cell[span-xs$="+9"], if-grid > if-cell[span-xs$="-8"], if-grid > if-cell[span-xs="9"] { --grid-ce: 9 }
  if-grid > if-cell[span-xs$="+10"], if-grid > if-cell[span-xs$="-9"], if-grid > if-cell[span-xs="10"] { --grid-ce: 10 }
  if-grid > if-cell[span-xs$="+11"], if-grid > if-cell[span-xs$="-10"], if-grid > if-cell[span-xs="11"] { --grid-ce: 11 }
  if-grid > if-cell[span-xs$="+12"], if-grid > if-cell[span-xs$="-11"], if-grid > if-cell[span-xs="12"] { --grid-ce: 12 }
  if-grid > if-cell[span-xs$="+13"], if-grid > if-cell[span-xs$="-12"], if-grid > if-cell[span-xs="13"] { --grid-ce: 13 }
  if-grid > if-cell[span-xs$="+14"], if-grid > if-cell[span-xs$="-13"], if-grid > if-cell[span-xs="14"] { --grid-ce: 14 }
  if-grid > if-cell[span-xs$="+15"], if-grid > if-cell[span-xs$="-14"], if-grid > if-cell[span-xs="15"] { --grid-ce: 15 }
  if-grid > if-cell[span-xs$="+16"], if-grid > if-cell[span-xs$="-15"], if-grid > if-cell[span-xs="16"] { --grid-ce: 16 }
  if-grid > if-cell[span-xs$="+17"], if-grid > if-cell[span-xs$="-16"], if-grid > if-cell[span-xs="17"] { --grid-ce: 17 }
  if-grid > if-cell[span-xs$="+18"], if-grid > if-cell[span-xs$="-17"], if-grid > if-cell[span-xs="18"] { --grid-ce: 18 }
  if-grid > if-cell[span-xs$="+19"], if-grid > if-cell[span-xs$="-18"], if-grid > if-cell[span-xs="19"] { --grid-ce: 19 }
  if-grid > if-cell[span-xs$="+20"], if-grid > if-cell[span-xs$="-19"], if-grid > if-cell[span-xs="20"] { --grid-ce: 20 }
  if-grid > if-cell[span-xs$="+21"], if-grid > if-cell[span-xs$="-20"], if-grid > if-cell[span-xs="21"] { --grid-ce: 21 }
  if-grid > if-cell[span-xs$="+22"], if-grid > if-cell[span-xs$="-21"], if-grid > if-cell[span-xs="22"] { --grid-ce: 22 }
  if-grid > if-cell[span-xs$="+23"], if-grid > if-cell[span-xs$="-22"], if-grid > if-cell[span-xs="23"] { --grid-ce: 23 }
  if-grid > if-cell[span-xs$="+24"], if-grid > if-cell[span-xs$="-23"], if-grid > if-cell[span-xs="24"] { --grid-ce: 24 }
  if-grid > if-cell[span-xs$="-24"] { --grid-ce: 25 }

  /* connect vars */
  if-grid > if-cell[span-xs] { grid-column-end: span var(--grid-ce) }
  if-grid > if-cell[span-xs*="+"], if-grid > if-cell[span-xs*="-"], if-grid > if-cell[span-xs*=".."] {
    grid-column-start: var(--grid-cs) }
  if-grid > if-cell[span-xs*="-"], if-grid > if-cell[span-xs*=".."] {
    grid-column-end: var(--grid-ce) }
  if-grid > if-cell[span-xs="row"] { grid-column: 1 / -1 }
}

/* ==========================================================================
   for window width => 600
   ========================================================================== */

@media only screen and (min-width: 600px) {
  if-grid[columns-s="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
  if-grid[columns-s="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
  if-grid[columns-s="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
  if-grid[columns-s="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
  if-grid[columns-s="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
  if-grid[columns-s="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
  if-grid[columns-s="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
  if-grid[columns-s="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
  if-grid[columns-s="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
  if-grid[columns-s="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
  if-grid[columns-s="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
  if-grid[columns-s="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
  if-grid[columns-s="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
  if-grid[columns-s="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
  if-grid[columns-s="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
  if-grid[columns-s="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
  if-grid[columns-s="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
  if-grid[columns-s="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
  if-grid[columns-s="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
  if-grid[columns-s="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
  if-grid[columns-s="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
  if-grid[columns-s="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
  if-grid[columns-s="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
  if-grid[columns-s="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }

  /* span-s=start... */
  if-grid > if-cell[span-s^="1"] { --grid-cs: 1 }
  if-grid > if-cell[span-s^="2"] { --grid-cs: 2 }
  if-grid > if-cell[span-s^="3"] { --grid-cs: 3 }
  if-grid > if-cell[span-s^="4"] { --grid-cs: 4 }
  if-grid > if-cell[span-s^="5"] { --grid-cs: 5 }
  if-grid > if-cell[span-s^="6"] { --grid-cs: 6 }
  if-grid > if-cell[span-s^="7"] { --grid-cs: 7 }
  if-grid > if-cell[span-s^="8"] { --grid-cs: 8 }
  if-grid > if-cell[span-s^="9"] { --grid-cs: 9 }
  if-grid > if-cell[span-s^="10"] { --grid-cs: 10 }
  if-grid > if-cell[span-s^="11"] { --grid-cs: 11 }
  if-grid > if-cell[span-s^="12"] { --grid-cs: 12 }
  if-grid > if-cell[span-s^="13"] { --grid-cs: 13 }
  if-grid > if-cell[span-s^="14"] { --grid-cs: 14 }
  if-grid > if-cell[span-s^="15"] { --grid-cs: 15 }
  if-grid > if-cell[span-s^="16"] { --grid-cs: 16 }
  if-grid > if-cell[span-s^="17"] { --grid-cs: 17 }
  if-grid > if-cell[span-s^="18"] { --grid-cs: 18 }
  if-grid > if-cell[span-s^="19"] { --grid-cs: 19 }
  if-grid > if-cell[span-s^="20"] { --grid-cs: 20 }
  if-grid > if-cell[span-s^="21"] { --grid-cs: 21 }
  if-grid > if-cell[span-s^="22"] { --grid-cs: 22 }
  if-grid > if-cell[span-s^="23"] { --grid-cs: 23 }
  if-grid > if-cell[span-s^="24"] { --grid-cs: 24 }

  /* span-s=...+width, span-s=...-end */
  if-grid > if-cell[span-s$="+1"], if-grid > if-cell[span-s="1"] { --grid-ce: 1 }
  if-grid > if-cell[span-s$="+2"], if-grid > if-cell[span-s$="-1"], if-grid > if-cell[span-s="2"] { --grid-ce: 2 }
  if-grid > if-cell[span-s$="+3"], if-grid > if-cell[span-s$="-2"], if-grid > if-cell[span-s="3"] { --grid-ce: 3 }
  if-grid > if-cell[span-s$="+4"], if-grid > if-cell[span-s$="-3"], if-grid > if-cell[span-s="4"] { --grid-ce: 4 }
  if-grid > if-cell[span-s$="+5"], if-grid > if-cell[span-s$="-4"], if-grid > if-cell[span-s="5"] { --grid-ce: 5 }
  if-grid > if-cell[span-s$="+6"], if-grid > if-cell[span-s$="-5"], if-grid > if-cell[span-s="6"] { --grid-ce: 6 }
  if-grid > if-cell[span-s$="+7"], if-grid > if-cell[span-s$="-6"], if-grid > if-cell[span-s="7"] { --grid-ce: 7 }
  if-grid > if-cell[span-s$="+8"], if-grid > if-cell[span-s$="-7"], if-grid > if-cell[span-s="8"] { --grid-ce: 8 }
  if-grid > if-cell[span-s$="+9"], if-grid > if-cell[span-s$="-8"], if-grid > if-cell[span-s="9"] { --grid-ce: 9 }
  if-grid > if-cell[span-s$="+10"], if-grid > if-cell[span-s$="-9"], if-grid > if-cell[span-s="10"] { --grid-ce: 10 }
  if-grid > if-cell[span-s$="+11"], if-grid > if-cell[span-s$="-10"], if-grid > if-cell[span-s="11"] { --grid-ce: 11 }
  if-grid > if-cell[span-s$="+12"], if-grid > if-cell[span-s$="-11"], if-grid > if-cell[span-s="12"] { --grid-ce: 12 }
  if-grid > if-cell[span-s$="+13"], if-grid > if-cell[span-s$="-12"], if-grid > if-cell[span-s="13"] { --grid-ce: 13 }
  if-grid > if-cell[span-s$="+14"], if-grid > if-cell[span-s$="-13"], if-grid > if-cell[span-s="14"] { --grid-ce: 14 }
  if-grid > if-cell[span-s$="+15"], if-grid > if-cell[span-s$="-14"], if-grid > if-cell[span-s="15"] { --grid-ce: 15 }
  if-grid > if-cell[span-s$="+16"], if-grid > if-cell[span-s$="-15"], if-grid > if-cell[span-s="16"] { --grid-ce: 16 }
  if-grid > if-cell[span-s$="+17"], if-grid > if-cell[span-s$="-16"], if-grid > if-cell[span-s="17"] { --grid-ce: 17 }
  if-grid > if-cell[span-s$="+18"], if-grid > if-cell[span-s$="-17"], if-grid > if-cell[span-s="18"] { --grid-ce: 18 }
  if-grid > if-cell[span-s$="+19"], if-grid > if-cell[span-s$="-18"], if-grid > if-cell[span-s="19"] { --grid-ce: 19 }
  if-grid > if-cell[span-s$="+20"], if-grid > if-cell[span-s$="-19"], if-grid > if-cell[span-s="20"] { --grid-ce: 20 }
  if-grid > if-cell[span-s$="+21"], if-grid > if-cell[span-s$="-20"], if-grid > if-cell[span-s="21"] { --grid-ce: 21 }
  if-grid > if-cell[span-s$="+22"], if-grid > if-cell[span-s$="-21"], if-grid > if-cell[span-s="22"] { --grid-ce: 22 }
  if-grid > if-cell[span-s$="+23"], if-grid > if-cell[span-s$="-22"], if-grid > if-cell[span-s="23"] { --grid-ce: 23 }
  if-grid > if-cell[span-s$="+24"], if-grid > if-cell[span-s$="-23"], if-grid > if-cell[span-s="24"] { --grid-ce: 24 }
  if-grid > if-cell[span-s$="-24"] { --grid-ce: 25 }

  /* connect vars */
  if-grid > if-cell[span-s] { grid-column-end: span var(--grid-ce) }
  if-grid > if-cell[span-s*="+"], if-grid > if-cell[span-s*="-"], if-grid > if-cell[span-s*=".."] {
    grid-column-start: var(--grid-cs) }
  if-grid > if-cell[span-s*="-"], if-grid > if-cell[span-s*=".."] {
    grid-column-end: var(--grid-ce) }
  if-grid > if-cell[span-s="row"] { grid-column: 1 / -1 }
}

/* ==========================================================================
   for window width => 768
   ========================================================================== */

@media only screen and (min-width: 768px) {
  if-grid[columns-m="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
  if-grid[columns-m="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
  if-grid[columns-m="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
  if-grid[columns-m="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
  if-grid[columns-m="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
  if-grid[columns-m="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
  if-grid[columns-m="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
  if-grid[columns-m="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
  if-grid[columns-m="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
  if-grid[columns-m="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
  if-grid[columns-m="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
  if-grid[columns-m="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
  if-grid[columns-m="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
  if-grid[columns-m="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
  if-grid[columns-m="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
  if-grid[columns-m="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
  if-grid[columns-m="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
  if-grid[columns-m="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
  if-grid[columns-m="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
  if-grid[columns-m="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
  if-grid[columns-m="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
  if-grid[columns-m="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
  if-grid[columns-m="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
  if-grid[columns-m="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }

  /* span-s=start... */
  if-grid > if-cell[span-m^="1"] { --grid-cs: 1 }
  if-grid > if-cell[span-m^="2"] { --grid-cs: 2 }
  if-grid > if-cell[span-m^="3"] { --grid-cs: 3 }
  if-grid > if-cell[span-m^="4"] { --grid-cs: 4 }
  if-grid > if-cell[span-m^="5"] { --grid-cs: 5 }
  if-grid > if-cell[span-m^="6"] { --grid-cs: 6 }
  if-grid > if-cell[span-m^="7"] { --grid-cs: 7 }
  if-grid > if-cell[span-m^="8"] { --grid-cs: 8 }
  if-grid > if-cell[span-m^="9"] { --grid-cs: 9 }
  if-grid > if-cell[span-m^="10"] { --grid-cs: 10 }
  if-grid > if-cell[span-m^="11"] { --grid-cs: 11 }
  if-grid > if-cell[span-m^="12"] { --grid-cs: 12 }
  if-grid > if-cell[span-m^="13"] { --grid-cs: 13 }
  if-grid > if-cell[span-m^="14"] { --grid-cs: 14 }
  if-grid > if-cell[span-m^="15"] { --grid-cs: 15 }
  if-grid > if-cell[span-m^="16"] { --grid-cs: 16 }
  if-grid > if-cell[span-m^="17"] { --grid-cs: 17 }
  if-grid > if-cell[span-m^="18"] { --grid-cs: 18 }
  if-grid > if-cell[span-m^="19"] { --grid-cs: 19 }
  if-grid > if-cell[span-m^="20"] { --grid-cs: 20 }
  if-grid > if-cell[span-m^="21"] { --grid-cs: 21 }
  if-grid > if-cell[span-m^="22"] { --grid-cs: 22 }
  if-grid > if-cell[span-m^="23"] { --grid-cs: 23 }
  if-grid > if-cell[span-m^="24"] { --grid-cs: 24 }

  /* span-s=...+width, span-s=...-end */
  if-grid > if-cell[span-m$="+1"], if-grid > if-cell[span-m="1"] { --grid-ce: 1 }
  if-grid > if-cell[span-m$="+2"], if-grid > if-cell[span-m$="-1"], if-grid > if-cell[span-m="2"] { --grid-ce: 2 }
  if-grid > if-cell[span-m$="+3"], if-grid > if-cell[span-m$="-2"], if-grid > if-cell[span-m="3"] { --grid-ce: 3 }
  if-grid > if-cell[span-m$="+4"], if-grid > if-cell[span-m$="-3"], if-grid > if-cell[span-m="4"] { --grid-ce: 4 }
  if-grid > if-cell[span-m$="+5"], if-grid > if-cell[span-m$="-4"], if-grid > if-cell[span-m="5"] { --grid-ce: 5 }
  if-grid > if-cell[span-m$="+6"], if-grid > if-cell[span-m$="-5"], if-grid > if-cell[span-m="6"] { --grid-ce: 6 }
  if-grid > if-cell[span-m$="+7"], if-grid > if-cell[span-m$="-6"], if-grid > if-cell[span-m="7"] { --grid-ce: 7 }
  if-grid > if-cell[span-m$="+8"], if-grid > if-cell[span-m$="-7"], if-grid > if-cell[span-m="8"] { --grid-ce: 8 }
  if-grid > if-cell[span-m$="+9"], if-grid > if-cell[span-m$="-8"], if-grid > if-cell[span-m="9"] { --grid-ce: 9 }
  if-grid > if-cell[span-m$="+10"], if-grid > if-cell[span-m$="-9"], if-grid > if-cell[span-m="10"] { --grid-ce: 10 }
  if-grid > if-cell[span-m$="+11"], if-grid > if-cell[span-m$="-10"], if-grid > if-cell[span-m="11"] { --grid-ce: 11 }
  if-grid > if-cell[span-m$="+12"], if-grid > if-cell[span-m$="-11"], if-grid > if-cell[span-m="12"] { --grid-ce: 12 }
  if-grid > if-cell[span-m$="+13"], if-grid > if-cell[span-m$="-12"], if-grid > if-cell[span-m="13"] { --grid-ce: 13 }
  if-grid > if-cell[span-m$="+14"], if-grid > if-cell[span-m$="-13"], if-grid > if-cell[span-m="14"] { --grid-ce: 14 }
  if-grid > if-cell[span-m$="+15"], if-grid > if-cell[span-m$="-14"], if-grid > if-cell[span-m="15"] { --grid-ce: 15 }
  if-grid > if-cell[span-m$="+16"], if-grid > if-cell[span-m$="-15"], if-grid > if-cell[span-m="16"] { --grid-ce: 16 }
  if-grid > if-cell[span-m$="+17"], if-grid > if-cell[span-m$="-16"], if-grid > if-cell[span-m="17"] { --grid-ce: 17 }
  if-grid > if-cell[span-m$="+18"], if-grid > if-cell[span-m$="-17"], if-grid > if-cell[span-m="18"] { --grid-ce: 18 }
  if-grid > if-cell[span-m$="+19"], if-grid > if-cell[span-m$="-18"], if-grid > if-cell[span-m="19"] { --grid-ce: 19 }
  if-grid > if-cell[span-m$="+20"], if-grid > if-cell[span-m$="-19"], if-grid > if-cell[span-m="20"] { --grid-ce: 20 }
  if-grid > if-cell[span-m$="+21"], if-grid > if-cell[span-m$="-20"], if-grid > if-cell[span-m="21"] { --grid-ce: 21 }
  if-grid > if-cell[span-m$="+22"], if-grid > if-cell[span-m$="-21"], if-grid > if-cell[span-m="22"] { --grid-ce: 22 }
  if-grid > if-cell[span-m$="+23"], if-grid > if-cell[span-m$="-22"], if-grid > if-cell[span-m="23"] { --grid-ce: 23 }
  if-grid > if-cell[span-m$="+24"], if-grid > if-cell[span-m$="-23"], if-grid > if-cell[span-m="24"] { --grid-ce: 24 }
  if-grid > if-cell[span-m$="-24"] { --grid-ce: 25 }

  /* connect vars */
  if-grid > if-cell[span-m] { grid-column-end: span var(--grid-ce) }
  if-grid > if-cell[span-m*="+"], if-grid > if-cell[span-m*="-"], if-grid > if-cell[span-m*=".."] {
    grid-column-start: var(--grid-cs) }
  if-grid > if-cell[span-m*="-"], if-grid > if-cell[span-m*=".."] {
    grid-column-end: var(--grid-ce) }
  if-grid > if-cell[span-m="row"] { grid-column: 1 / -1 }
}

/* ==========================================================================
   for window width => 992
   ========================================================================== */

@media only screen and (min-width: 992px) {
  if-grid[columns-l="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
  if-grid[columns-l="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
  if-grid[columns-l="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
  if-grid[columns-l="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
  if-grid[columns-l="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
  if-grid[columns-l="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
  if-grid[columns-l="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
  if-grid[columns-l="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
  if-grid[columns-l="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
  if-grid[columns-l="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
  if-grid[columns-l="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
  if-grid[columns-l="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
  if-grid[columns-l="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
  if-grid[columns-l="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
  if-grid[columns-l="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
  if-grid[columns-l="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
  if-grid[columns-l="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
  if-grid[columns-l="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
  if-grid[columns-l="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
  if-grid[columns-l="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
  if-grid[columns-l="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
  if-grid[columns-l="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
  if-grid[columns-l="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
  if-grid[columns-l="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }

  /* span-l=start... */
  if-grid > if-cell[span-l^="1"] { --grid-cs: 1 }
  if-grid > if-cell[span-l^="2"] { --grid-cs: 2 }
  if-grid > if-cell[span-l^="3"] { --grid-cs: 3 }
  if-grid > if-cell[span-l^="4"] { --grid-cs: 4 }
  if-grid > if-cell[span-l^="5"] { --grid-cs: 5 }
  if-grid > if-cell[span-l^="6"] { --grid-cs: 6 }
  if-grid > if-cell[span-l^="7"] { --grid-cs: 7 }
  if-grid > if-cell[span-l^="8"] { --grid-cs: 8 }
  if-grid > if-cell[span-l^="9"] { --grid-cs: 9 }
  if-grid > if-cell[span-l^="10"] { --grid-cs: 10 }
  if-grid > if-cell[span-l^="11"] { --grid-cs: 11 }
  if-grid > if-cell[span-l^="12"] { --grid-cs: 12 }
  if-grid > if-cell[span-l^="13"] { --grid-cs: 13 }
  if-grid > if-cell[span-l^="14"] { --grid-cs: 14 }
  if-grid > if-cell[span-l^="15"] { --grid-cs: 15 }
  if-grid > if-cell[span-l^="16"] { --grid-cs: 16 }
  if-grid > if-cell[span-l^="17"] { --grid-cs: 17 }
  if-grid > if-cell[span-l^="18"] { --grid-cs: 18 }
  if-grid > if-cell[span-l^="19"] { --grid-cs: 19 }
  if-grid > if-cell[span-l^="20"] { --grid-cs: 20 }
  if-grid > if-cell[span-l^="21"] { --grid-cs: 21 }
  if-grid > if-cell[span-l^="22"] { --grid-cs: 22 }
  if-grid > if-cell[span-l^="23"] { --grid-cs: 23 }
  if-grid > if-cell[span-l^="24"] { --grid-cs: 24 }

  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-l$="+1"], if-grid > if-cell[span-l="1"] { --grid-ce: 1 }
  if-grid > if-cell[span-l$="+2"], if-grid > if-cell[span-l$="-1"], if-grid > if-cell[span-l="2"] { --grid-ce: 2 }
  if-grid > if-cell[span-l$="+3"], if-grid > if-cell[span-l$="-2"], if-grid > if-cell[span-l="3"] { --grid-ce: 3 }
  if-grid > if-cell[span-l$="+4"], if-grid > if-cell[span-l$="-3"], if-grid > if-cell[span-l="4"] { --grid-ce: 4 }
  if-grid > if-cell[span-l$="+5"], if-grid > if-cell[span-l$="-4"], if-grid > if-cell[span-l="5"] { --grid-ce: 5 }
  if-grid > if-cell[span-l$="+6"], if-grid > if-cell[span-l$="-5"], if-grid > if-cell[span-l="6"] { --grid-ce: 6 }
  if-grid > if-cell[span-l$="+7"], if-grid > if-cell[span-l$="-6"], if-grid > if-cell[span-l="7"] { --grid-ce: 7 }
  if-grid > if-cell[span-l$="+8"], if-grid > if-cell[span-l$="-7"], if-grid > if-cell[span-l="8"] { --grid-ce: 8 }
  if-grid > if-cell[span-l$="+9"], if-grid > if-cell[span-l$="-8"], if-grid > if-cell[span-l="9"] { --grid-ce: 9 }
  if-grid > if-cell[span-l$="+10"], if-grid > if-cell[span-l$="-9"], if-grid > if-cell[span-l="10"] { --grid-ce: 10 }
  if-grid > if-cell[span-l$="+11"], if-grid > if-cell[span-l$="-10"], if-grid > if-cell[span-l="11"] { --grid-ce: 11 }
  if-grid > if-cell[span-l$="+12"], if-grid > if-cell[span-l$="-11"], if-grid > if-cell[span-l="12"] { --grid-ce: 12 }
  if-grid > if-cell[span-l$="+13"], if-grid > if-cell[span-l$="-12"], if-grid > if-cell[span-l="13"] { --grid-ce: 13 }
  if-grid > if-cell[span-l$="+14"], if-grid > if-cell[span-l$="-13"], if-grid > if-cell[span-l="14"] { --grid-ce: 14 }
  if-grid > if-cell[span-l$="+15"], if-grid > if-cell[span-l$="-14"], if-grid > if-cell[span-l="15"] { --grid-ce: 15 }
  if-grid > if-cell[span-l$="+16"], if-grid > if-cell[span-l$="-15"], if-grid > if-cell[span-l="16"] { --grid-ce: 16 }
  if-grid > if-cell[span-l$="+17"], if-grid > if-cell[span-l$="-16"], if-grid > if-cell[span-l="17"] { --grid-ce: 17 }
  if-grid > if-cell[span-l$="+18"], if-grid > if-cell[span-l$="-17"], if-grid > if-cell[span-l="18"] { --grid-ce: 18 }
  if-grid > if-cell[span-l$="+19"], if-grid > if-cell[span-l$="-18"], if-grid > if-cell[span-l="19"] { --grid-ce: 19 }
  if-grid > if-cell[span-l$="+20"], if-grid > if-cell[span-l$="-19"], if-grid > if-cell[span-l="20"] { --grid-ce: 20 }
  if-grid > if-cell[span-l$="+21"], if-grid > if-cell[span-l$="-20"], if-grid > if-cell[span-l="21"] { --grid-ce: 21 }
  if-grid > if-cell[span-l$="+22"], if-grid > if-cell[span-l$="-21"], if-grid > if-cell[span-l="22"] { --grid-ce: 22 }
  if-grid > if-cell[span-l$="+23"], if-grid > if-cell[span-l$="-22"], if-grid > if-cell[span-l="23"] { --grid-ce: 23 }
  if-grid > if-cell[span-l$="+24"], if-grid > if-cell[span-l$="-23"], if-grid > if-cell[span-l="24"] { --grid-ce: 24 }
  if-grid > if-cell[span-l$="-24"] { --grid-ce: 25 }

  /* connect vars */
  if-grid > if-cell[span-l] { grid-column-end: span var(--grid-ce) }
  if-grid > if-cell[span-l*="+"], if-grid > if-cell[span-l*="-"], if-grid > if-cell[span-l*=".."] {
    grid-column-start: var(--grid-cs) }
  if-grid > if-cell[span-l*="-"], if-grid > if-cell[span-l*=".."] {
    grid-column-end: var(--grid-ce) }
  if-grid > if-cell[span-l="row"] { grid-column: 1 / -1 }
}

/* ==========================================================================
   for window width => 1280
   ========================================================================== */

@media only screen and (min-width: 1280px) {
  if-grid[columns-xl="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
  if-grid[columns-xl="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
  if-grid[columns-xl="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
  if-grid[columns-xl="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
  if-grid[columns-xl="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
  if-grid[columns-xl="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
  if-grid[columns-xl="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
  if-grid[columns-xl="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
  if-grid[columns-xl="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
  if-grid[columns-xl="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
  if-grid[columns-xl="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
  if-grid[columns-xl="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
  if-grid[columns-xl="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
  if-grid[columns-xl="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
  if-grid[columns-xl="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
  if-grid[columns-xl="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
  if-grid[columns-xl="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
  if-grid[columns-xl="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
  if-grid[columns-xl="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
  if-grid[columns-xl="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
  if-grid[columns-xl="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
  if-grid[columns-xl="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
  if-grid[columns-xl="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
  if-grid[columns-xl="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }

  /* span-l=start... */
  if-grid > if-cell[span-xl^="1"] { --grid-cs: 1 }
  if-grid > if-cell[span-xl^="2"] { --grid-cs: 2 }
  if-grid > if-cell[span-xl^="3"] { --grid-cs: 3 }
  if-grid > if-cell[span-xl^="4"] { --grid-cs: 4 }
  if-grid > if-cell[span-xl^="5"] { --grid-cs: 5 }
  if-grid > if-cell[span-xl^="6"] { --grid-cs: 6 }
  if-grid > if-cell[span-xl^="7"] { --grid-cs: 7 }
  if-grid > if-cell[span-xl^="8"] { --grid-cs: 8 }
  if-grid > if-cell[span-xl^="9"] { --grid-cs: 9 }
  if-grid > if-cell[span-xl^="10"] { --grid-cs: 10 }
  if-grid > if-cell[span-xl^="11"] { --grid-cs: 11 }
  if-grid > if-cell[span-xl^="12"] { --grid-cs: 12 }
  if-grid > if-cell[span-xl^="13"] { --grid-cs: 13 }
  if-grid > if-cell[span-xl^="14"] { --grid-cs: 14 }
  if-grid > if-cell[span-xl^="15"] { --grid-cs: 15 }
  if-grid > if-cell[span-xl^="16"] { --grid-cs: 16 }
  if-grid > if-cell[span-xl^="17"] { --grid-cs: 17 }
  if-grid > if-cell[span-xl^="18"] { --grid-cs: 18 }
  if-grid > if-cell[span-xl^="19"] { --grid-cs: 19 }
  if-grid > if-cell[span-xl^="20"] { --grid-cs: 20 }
  if-grid > if-cell[span-xl^="21"] { --grid-cs: 21 }
  if-grid > if-cell[span-xl^="22"] { --grid-cs: 22 }
  if-grid > if-cell[span-xl^="23"] { --grid-cs: 23 }
  if-grid > if-cell[span-xl^="24"] { --grid-cs: 24 }

  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-xl$="+1"], if-grid > if-cell[span-l="1"] { --grid-ce: 1 }
  if-grid > if-cell[span-xl$="+2"], if-grid > if-cell[span-xl$="-1"], if-grid > if-cell[span-xl="2"] { --grid-ce: 2 }
  if-grid > if-cell[span-xl$="+3"], if-grid > if-cell[span-xl$="-2"], if-grid > if-cell[span-xl="3"] { --grid-ce: 3 }
  if-grid > if-cell[span-xl$="+4"], if-grid > if-cell[span-xl$="-3"], if-grid > if-cell[span-xl="4"] { --grid-ce: 4 }
  if-grid > if-cell[span-xl$="+5"], if-grid > if-cell[span-xl$="-4"], if-grid > if-cell[span-xl="5"] { --grid-ce: 5 }
  if-grid > if-cell[span-xl$="+6"], if-grid > if-cell[span-xl$="-5"], if-grid > if-cell[span-xl="6"] { --grid-ce: 6 }
  if-grid > if-cell[span-xl$="+7"], if-grid > if-cell[span-xl$="-6"], if-grid > if-cell[span-xl="7"] { --grid-ce: 7 }
  if-grid > if-cell[span-xl$="+8"], if-grid > if-cell[span-xl$="-7"], if-grid > if-cell[span-xl="8"] { --grid-ce: 8 }
  if-grid > if-cell[span-xl$="+9"], if-grid > if-cell[span-xl$="-8"], if-grid > if-cell[span-xl="9"] { --grid-ce: 9 }
  if-grid > if-cell[span-xl$="+10"], if-grid > if-cell[span-xl$="-9"], if-grid > if-cell[span-xl="10"] { --grid-ce: 10 }
  if-grid > if-cell[span-xl$="+11"], if-grid > if-cell[span-xl$="-10"], if-grid > if-cell[span-xl="11"] { --grid-ce: 11 }
  if-grid > if-cell[span-xl$="+12"], if-grid > if-cell[span-xl$="-11"], if-grid > if-cell[span-xl="12"] { --grid-ce: 12 }
  if-grid > if-cell[span-xl$="+13"], if-grid > if-cell[span-xl$="-12"], if-grid > if-cell[span-xl="13"] { --grid-ce: 13 }
  if-grid > if-cell[span-xl$="+14"], if-grid > if-cell[span-xl$="-13"], if-grid > if-cell[span-xl="14"] { --grid-ce: 14 }
  if-grid > if-cell[span-xl$="+15"], if-grid > if-cell[span-xl$="-14"], if-grid > if-cell[span-xl="15"] { --grid-ce: 15 }
  if-grid > if-cell[span-xl$="+16"], if-grid > if-cell[span-xl$="-15"], if-grid > if-cell[span-xl="16"] { --grid-ce: 16 }
  if-grid > if-cell[span-xl$="+17"], if-grid > if-cell[span-xl$="-16"], if-grid > if-cell[span-xl="17"] { --grid-ce: 17 }
  if-grid > if-cell[span-xl$="+18"], if-grid > if-cell[span-xl$="-17"], if-grid > if-cell[span-xl="18"] { --grid-ce: 18 }
  if-grid > if-cell[span-xl$="+19"], if-grid > if-cell[span-xl$="-18"], if-grid > if-cell[span-xl="19"] { --grid-ce: 19 }
  if-grid > if-cell[span-xl$="+20"], if-grid > if-cell[span-xl$="-19"], if-grid > if-cell[span-xl="20"] { --grid-ce: 20 }
  if-grid > if-cell[span-xl$="+21"], if-grid > if-cell[span-xl$="-20"], if-grid > if-cell[span-xl="21"] { --grid-ce: 21 }
  if-grid > if-cell[span-xl$="+22"], if-grid > if-cell[span-xl$="-21"], if-grid > if-cell[span-xl="22"] { --grid-ce: 22 }
  if-grid > if-cell[span-xl$="+23"], if-grid > if-cell[span-xl$="-22"], if-grid > if-cell[span-xl="23"] { --grid-ce: 23 }
  if-grid > if-cell[span-xl$="+24"], if-grid > if-cell[span-xl$="-23"], if-grid > if-cell[span-xl="24"] { --grid-ce: 24 }
  if-grid > if-cell[span-xl$="-24"] { --grid-ce: 25 }

  /* connect vars */
  if-grid > if-cell[span-xl] { grid-column-end: span var(--grid-ce) }
  if-grid > if-cell[span-xl*="+"], if-grid > if-cell[span-xl*="-"], if-grid > if-cell[span-xl*=".."] {
    grid-column-start: var(--grid-cs) }
  if-grid > if-cell[span-xl*="-"], if-grid > if-cell[span-xl*=".."] {
    grid-column-end: var(--grid-ce) }
  if-grid > if-cell[span-xl="row"] { grid-column: 1 / -1 }
}

/* ==========================================================================
   for window width => 1440
   ========================================================================== */

@media only screen and (min-width: 1440px) {
  if-grid[columns-xxl="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
  if-grid[columns-xxl="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
  if-grid[columns-xxl="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
  if-grid[columns-xxl="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
  if-grid[columns-xxl="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
  if-grid[columns-xxl="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
  if-grid[columns-xxl="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
  if-grid[columns-xxl="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
  if-grid[columns-xxl="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
  if-grid[columns-xxl="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
  if-grid[columns-xxl="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
  if-grid[columns-xxl="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
  if-grid[columns-xxl="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
  if-grid[columns-xxl="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
  if-grid[columns-xxl="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
  if-grid[columns-xxl="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
  if-grid[columns-xxl="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
  if-grid[columns-xxl="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
  if-grid[columns-xxl="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
  if-grid[columns-xxl="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
  if-grid[columns-xxl="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
  if-grid[columns-xxl="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
  if-grid[columns-xxl="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
  if-grid[columns-xxl="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }

  /* span-l=start... */
  if-grid > if-cell[span-xxl^="1"] { --grid-cs: 1 }
  if-grid > if-cell[span-xxl^="2"] { --grid-cs: 2 }
  if-grid > if-cell[span-xxl^="3"] { --grid-cs: 3 }
  if-grid > if-cell[span-xxl^="4"] { --grid-cs: 4 }
  if-grid > if-cell[span-xxl^="5"] { --grid-cs: 5 }
  if-grid > if-cell[span-xxl^="6"] { --grid-cs: 6 }
  if-grid > if-cell[span-xxl^="7"] { --grid-cs: 7 }
  if-grid > if-cell[span-xxl^="8"] { --grid-cs: 8 }
  if-grid > if-cell[span-xxl^="9"] { --grid-cs: 9 }
  if-grid > if-cell[span-xxl^="10"] { --grid-cs: 10 }
  if-grid > if-cell[span-xxl^="11"] { --grid-cs: 11 }
  if-grid > if-cell[span-xxl^="12"] { --grid-cs: 12 }
  if-grid > if-cell[span-xxl^="13"] { --grid-cs: 13 }
  if-grid > if-cell[span-xxl^="14"] { --grid-cs: 14 }
  if-grid > if-cell[span-xxl^="15"] { --grid-cs: 15 }
  if-grid > if-cell[span-xxl^="16"] { --grid-cs: 16 }
  if-grid > if-cell[span-xxl^="17"] { --grid-cs: 17 }
  if-grid > if-cell[span-xxl^="18"] { --grid-cs: 18 }
  if-grid > if-cell[span-xxl^="19"] { --grid-cs: 19 }
  if-grid > if-cell[span-xxl^="20"] { --grid-cs: 20 }
  if-grid > if-cell[span-xxl^="21"] { --grid-cs: 21 }
  if-grid > if-cell[span-xxl^="22"] { --grid-cs: 22 }
  if-grid > if-cell[span-xxl^="23"] { --grid-cs: 23 }
  if-grid > if-cell[span-xxl^="24"] { --grid-cs: 24 }

  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-xxl$="+1"], if-grid > if-cell[span-xxl="1"] { --grid-ce: 1 }
  if-grid > if-cell[span-xxl$="+2"], if-grid > if-cell[span-xxl$="-1"], if-grid > if-cell[span-xxl="2"] { --grid-ce: 2 }
  if-grid > if-cell[span-xxl$="+3"], if-grid > if-cell[span-xxl$="-2"], if-grid > if-cell[span-xxl="3"] { --grid-ce: 3 }
  if-grid > if-cell[span-xxl$="+4"], if-grid > if-cell[span-xxl$="-3"], if-grid > if-cell[span-xxl="4"] { --grid-ce: 4 }
  if-grid > if-cell[span-xxl$="+5"], if-grid > if-cell[span-xxl$="-4"], if-grid > if-cell[span-xxl="5"] { --grid-ce: 5 }
  if-grid > if-cell[span-xxl$="+6"], if-grid > if-cell[span-xxl$="-5"], if-grid > if-cell[span-xxl="6"] { --grid-ce: 6 }
  if-grid > if-cell[span-xxl$="+7"], if-grid > if-cell[span-xxl$="-6"], if-grid > if-cell[span-xxl="7"] { --grid-ce: 7 }
  if-grid > if-cell[span-xxl$="+8"], if-grid > if-cell[span-xxl$="-7"], if-grid > if-cell[span-xxl="8"] { --grid-ce: 8 }
  if-grid > if-cell[span-xxl$="+9"], if-grid > if-cell[span-xxl$="-8"], if-grid > if-cell[span-xxl="9"] { --grid-ce: 9 }
  if-grid > if-cell[span-xxl$="+10"], if-grid > if-cell[span-xxl$="-9"], if-grid > if-cell[span-xxl="10"] { --grid-ce: 10 }
  if-grid > if-cell[span-xxl$="+11"], if-grid > if-cell[span-xxl$="-10"], if-grid > if-cell[span-xxl="11"] { --grid-ce: 11 }
  if-grid > if-cell[span-xxl$="+12"], if-grid > if-cell[span-xxl$="-11"], if-grid > if-cell[span-xxl="12"] { --grid-ce: 12 }
  if-grid > if-cell[span-xxl$="+13"], if-grid > if-cell[span-xxl$="-12"], if-grid > if-cell[span-xxl="13"] { --grid-ce: 13 }
  if-grid > if-cell[span-xxl$="+14"], if-grid > if-cell[span-xxl$="-13"], if-grid > if-cell[span-xxl="14"] { --grid-ce: 14 }
  if-grid > if-cell[span-xxl$="+15"], if-grid > if-cell[span-xxl$="-14"], if-grid > if-cell[span-xxl="15"] { --grid-ce: 15 }
  if-grid > if-cell[span-xxl$="+16"], if-grid > if-cell[span-xxl$="-15"], if-grid > if-cell[span-xxl="16"] { --grid-ce: 16 }
  if-grid > if-cell[span-xxl$="+17"], if-grid > if-cell[span-xxl$="-16"], if-grid > if-cell[span-xxl="17"] { --grid-ce: 17 }
  if-grid > if-cell[span-xxl$="+18"], if-grid > if-cell[span-xxl$="-17"], if-grid > if-cell[span-xxl="18"] { --grid-ce: 18 }
  if-grid > if-cell[span-xxl$="+19"], if-grid > if-cell[span-xxl$="-18"], if-grid > if-cell[span-xxl="19"] { --grid-ce: 19 }
  if-grid > if-cell[span-xxl$="+20"], if-grid > if-cell[span-xxl$="-19"], if-grid > if-cell[span-xxl="20"] { --grid-ce: 20 }
  if-grid > if-cell[span-xxl$="+21"], if-grid > if-cell[span-xxl$="-20"], if-grid > if-cell[span-xxl="21"] { --grid-ce: 21 }
  if-grid > if-cell[span-xxl$="+22"], if-grid > if-cell[span-xxl$="-21"], if-grid > if-cell[span-xxl="22"] { --grid-ce: 22 }
  if-grid > if-cell[span-xxl$="+23"], if-grid > if-cell[span-xxl$="-22"], if-grid > if-cell[span-xxl="23"] { --grid-ce: 23 }
  if-grid > if-cell[span-xxl$="+24"], if-grid > if-cell[span-xxl$="-23"], if-grid > if-cell[span-xxl="24"] { --grid-ce: 24 }
  if-grid > if-cell[span-xxl$="-24"] { --grid-ce: 25 }

  /* connect vars */
  if-grid > if-cell[span-xxl] { grid-column-end: span var(--grid-ce) }
  if-grid > if-cell[span-xxl*="+"], if-grid > if-cell[span-xxl*="-"], if-grid > if-cell[span-xxl*=".."] {
    grid-column-start: var(--grid-cs) }
  if-grid > if-cell[span-xxl*="-"], if-grid > if-cell[span-xxl*=".."] {
    grid-column-end: var(--grid-ce) }
  if-grid > if-cell[span-xxl="row"] { grid-column: 1 / -1 }
}

/* ==========================================================================
   for window width => 1680
   ========================================================================== */

   @media only screen and (min-width: 1600px) {
    if-grid[columns-xxxl="1"] { --grid-tc: repeat(1, minmax(0, 1fr)) }
    if-grid[columns-xxxl="2"] { --grid-tc: repeat(2, minmax(0, 1fr)) }
    if-grid[columns-xxxl="3"] { --grid-tc: repeat(3, minmax(0, 1fr)) }
    if-grid[columns-xxxl="4"] { --grid-tc: repeat(4, minmax(0, 1fr)) }
    if-grid[columns-xxxl="5"] { --grid-tc: repeat(5, minmax(0, 1fr)) }
    if-grid[columns-xxxl="6"] { --grid-tc: repeat(6, minmax(0, 1fr)) }
    if-grid[columns-xxxl="7"] { --grid-tc: repeat(7, minmax(0, 1fr)) }
    if-grid[columns-xxxl="8"] { --grid-tc: repeat(8, minmax(0, 1fr)) }
    if-grid[columns-xxxl="9"] { --grid-tc: repeat(9, minmax(0, 1fr)) }
    if-grid[columns-xxxl="10"] { --grid-tc: repeat(10, minmax(0, 1fr)) }
    if-grid[columns-xxxl="11"] { --grid-tc: repeat(11, minmax(0, 1fr)) }
    if-grid[columns-xxxl="12"] { --grid-tc: repeat(12, minmax(0, 1fr)) }
    if-grid[columns-xxxl="13"] { --grid-tc: repeat(13, minmax(0, 1fr)) }
    if-grid[columns-xxxl="14"] { --grid-tc: repeat(14, minmax(0, 1fr)) }
    if-grid[columns-xxxl="15"] { --grid-tc: repeat(15, minmax(0, 1fr)) }
    if-grid[columns-xxxl="16"] { --grid-tc: repeat(16, minmax(0, 1fr)) }
    if-grid[columns-xxxl="17"] { --grid-tc: repeat(17, minmax(0, 1fr)) }
    if-grid[columns-xxxl="18"] { --grid-tc: repeat(18, minmax(0, 1fr)) }
    if-grid[columns-xxxl="19"] { --grid-tc: repeat(19, minmax(0, 1fr)) }
    if-grid[columns-xxxl="20"] { --grid-tc: repeat(20, minmax(0, 1fr)) }
    if-grid[columns-xxxl="21"] { --grid-tc: repeat(21, minmax(0, 1fr)) }
    if-grid[columns-xxxl="22"] { --grid-tc: repeat(22, minmax(0, 1fr)) }
    if-grid[columns-xxxl="23"] { --grid-tc: repeat(23, minmax(0, 1fr)) }
    if-grid[columns-xxxl="24"] { --grid-tc: repeat(24, minmax(0, 1fr)) }
  
    /* span-l=start... */
    if-grid > if-cell[span-xxxl^="1"] { --grid-cs: 1 }
    if-grid > if-cell[span-xxxl^="2"] { --grid-cs: 2 }
    if-grid > if-cell[span-xxxl^="3"] { --grid-cs: 3 }
    if-grid > if-cell[span-xxxl^="4"] { --grid-cs: 4 }
    if-grid > if-cell[span-xxxl^="5"] { --grid-cs: 5 }
    if-grid > if-cell[span-xxxl^="6"] { --grid-cs: 6 }
    if-grid > if-cell[span-xxxl^="7"] { --grid-cs: 7 }
    if-grid > if-cell[span-xxxl^="8"] { --grid-cs: 8 }
    if-grid > if-cell[span-xxxl^="9"] { --grid-cs: 9 }
    if-grid > if-cell[span-xxxl^="10"] { --grid-cs: 10 }
    if-grid > if-cell[span-xxxl^="11"] { --grid-cs: 11 }
    if-grid > if-cell[span-xxxl^="12"] { --grid-cs: 12 }
    if-grid > if-cell[span-xxxl^="13"] { --grid-cs: 13 }
    if-grid > if-cell[span-xxxl^="14"] { --grid-cs: 14 }
    if-grid > if-cell[span-xxxl^="15"] { --grid-cs: 15 }
    if-grid > if-cell[span-xxxl^="16"] { --grid-cs: 16 }
    if-grid > if-cell[span-xxxl^="17"] { --grid-cs: 17 }
    if-grid > if-cell[span-xxxl^="18"] { --grid-cs: 18 }
    if-grid > if-cell[span-xxxl^="19"] { --grid-cs: 19 }
    if-grid > if-cell[span-xxxl^="20"] { --grid-cs: 20 }
    if-grid > if-cell[span-xxxl^="21"] { --grid-cs: 21 }
    if-grid > if-cell[span-xxxl^="22"] { --grid-cs: 22 }
    if-grid > if-cell[span-xxxl^="23"] { --grid-cs: 23 }
    if-grid > if-cell[span-xxxl^="24"] { --grid-cs: 24 }
  
    /* span-l=...+width, span-l=...-end */
    if-grid > if-cell[span-xxxl$="+1"], if-grid > if-cell[span-xxxl="1"] { --grid-ce: 1 }
    if-grid > if-cell[span-xxxl$="+2"], if-grid > if-cell[span-xxxl$="-1"], if-grid > if-cell[span-xxxl="2"] { --grid-ce: 2 }
    if-grid > if-cell[span-xxxl$="+3"], if-grid > if-cell[span-xxxl$="-2"], if-grid > if-cell[span-xxxl="3"] { --grid-ce: 3 }
    if-grid > if-cell[span-xxxl$="+4"], if-grid > if-cell[span-xxxl$="-3"], if-grid > if-cell[span-xxxl="4"] { --grid-ce: 4 }
    if-grid > if-cell[span-xxxl$="+5"], if-grid > if-cell[span-xxxl$="-4"], if-grid > if-cell[span-xxxl="5"] { --grid-ce: 5 }
    if-grid > if-cell[span-xxxl$="+6"], if-grid > if-cell[span-xxxl$="-5"], if-grid > if-cell[span-xxxl="6"] { --grid-ce: 6 }
    if-grid > if-cell[span-xxxl$="+7"], if-grid > if-cell[span-xxxl$="-6"], if-grid > if-cell[span-xxxl="7"] { --grid-ce: 7 }
    if-grid > if-cell[span-xxxl$="+8"], if-grid > if-cell[span-xxxl$="-7"], if-grid > if-cell[span-xxxl="8"] { --grid-ce: 8 }
    if-grid > if-cell[span-xxxl$="+9"], if-grid > if-cell[span-xxxl$="-8"], if-grid > if-cell[span-xxxl="9"] { --grid-ce: 9 }
    if-grid > if-cell[span-xxxl$="+10"], if-grid > if-cell[span-xxxl$="-9"], if-grid > if-cell[span-xxxl="10"] { --grid-ce: 10 }
    if-grid > if-cell[span-xxxl$="+11"], if-grid > if-cell[span-xxxl$="-10"], if-grid > if-cell[span-xxxl="11"] { --grid-ce: 11 }
    if-grid > if-cell[span-xxxl$="+12"], if-grid > if-cell[span-xxxl$="-11"], if-grid > if-cell[span-xxxl="12"] { --grid-ce: 12 }
    if-grid > if-cell[span-xxxl$="+13"], if-grid > if-cell[span-xxxl$="-12"], if-grid > if-cell[span-xxxl="13"] { --grid-ce: 13 }
    if-grid > if-cell[span-xxxl$="+14"], if-grid > if-cell[span-xxxl$="-13"], if-grid > if-cell[span-xxxl="14"] { --grid-ce: 14 }
    if-grid > if-cell[span-xxxl$="+15"], if-grid > if-cell[span-xxxl$="-14"], if-grid > if-cell[span-xxxl="15"] { --grid-ce: 15 }
    if-grid > if-cell[span-xxxl$="+16"], if-grid > if-cell[span-xxxl$="-15"], if-grid > if-cell[span-xxxl="16"] { --grid-ce: 16 }
    if-grid > if-cell[span-xxxl$="+17"], if-grid > if-cell[span-xxxl$="-16"], if-grid > if-cell[span-xxxl="17"] { --grid-ce: 17 }
    if-grid > if-cell[span-xxxl$="+18"], if-grid > if-cell[span-xxxl$="-17"], if-grid > if-cell[span-xxxl="18"] { --grid-ce: 18 }
    if-grid > if-cell[span-xxxl$="+19"], if-grid > if-cell[span-xxxl$="-18"], if-grid > if-cell[span-xxxl="19"] { --grid-ce: 19 }
    if-grid > if-cell[span-xxxl$="+20"], if-grid > if-cell[span-xxxl$="-19"], if-grid > if-cell[span-xxxl="20"] { --grid-ce: 20 }
    if-grid > if-cell[span-xxxl$="+21"], if-grid > if-cell[span-xxxl$="-20"], if-grid > if-cell[span-xxxl="21"] { --grid-ce: 21 }
    if-grid > if-cell[span-xxxl$="+22"], if-grid > if-cell[span-xxxl$="-21"], if-grid > if-cell[span-xxxl="22"] { --grid-ce: 22 }
    if-grid > if-cell[span-xxxl$="+23"], if-grid > if-cell[span-xxxl$="-22"], if-grid > if-cell[span-xxxl="23"] { --grid-ce: 23 }
    if-grid > if-cell[span-xxxl$="+24"], if-grid > if-cell[span-xxxl$="-23"], if-grid > if-cell[span-xxxl="24"] { --grid-ce: 24 }
    if-grid > if-cell[span-xxxl$="-24"] { --grid-ce: 25 }
  
    /* connect vars */
    if-grid > if-cell[span-xxxl] { grid-column-end: span var(--grid-ce) }
    if-grid > if-cell[span-xxxl*="+"], if-grid > if-cell[span-xxxl*="-"], if-grid > if-cell[span-xxxl*=".."] {
      grid-column-start: var(--grid-cs) }
    if-grid > if-cell[span-xxxl*="-"], if-grid > if-cell[span-xxxl*=".."] {
      grid-column-end: var(--grid-ce) }
    if-grid > if-cell[span-xxxl="row"] { grid-column: 1 / -1 }
  }

/* ==========================================================================
   Additional Styles
   ========================================================================== */

/* .debug can be added to a if-grid to visualize its effective cells */
if-grid.debug > * {
  --color: rgba(248,110,91 ,0.3);
  background-image:
    linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
}
if-grid.debug > :nth-child(6n+2) { --color: rgba(103,126,208,0.3) }
if-grid.debug > :nth-child(6n+3) { --color: rgba(224,174,72 ,0.3) }
if-grid.debug > :nth-child(6n+4) { --color: rgba(77, 214,115,0.3) }
if-grid.debug > :nth-child(6n+5) { --color: rgba(217,103,219,0.3) }
if-grid.debug > :nth-child(6n+6) { --color: rgba(94, 204,211,0.3) }
if-grid.debug > :nth-child(6n+7) { --color: rgba(248,110,91 ,0.3) }

/* Alignment */
if-grid.cell-center > if-cell {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}
if-grid.cell-top > if-cell {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
  align-self: start;
}
if-grid.cell-bottom > if-cell {
  -webkit-align-self: end;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end;
}

/* Cell Alignment */
if-cell.cell-center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  text-align: center;
}
if-cell.cell-center h4, if-cell.cell-center h3 {
  text-align: center;
}
if-cell.cell-top {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
  align-self: start;
}
if-cell.cell-bottom {
  -webkit-align-self: end;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end;
}

.cell-start {
  -ms-grid-column-align: start;
  justify-self: start;
}
.cell-end {
  -ms-grid-column-align: end;
  justify-self: end;
}
.cell-center {
  -ms-grid-column-align: center;
  justify-self: center;
}

/* Gutters */
if-grid {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media only screen and (min-width: 768px) {
    if-grid {
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      padding-left: 20px;
      padding-right: 20px;
    }
    footer if-grid {
      padding-left: 40px;
      padding-right: 40px;
    }
}