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

/* r-cell -- cell or column */
r-grid > r-cell { display: block; appearance: none; -webkit-appearance: none }

r-grid[col="1"] { --grid-tc: repeat(1, 1fr) }
r-grid[col="2"] { --grid-tc: repeat(2, 1fr) }
r-grid[col="3"] { --grid-tc: repeat(3, 1fr) }
r-grid[col="4"] { --grid-tc: repeat(4, 1fr) }
r-grid[col="5"] { --grid-tc: repeat(5, 1fr) }
r-grid[col="6"] { --grid-tc: repeat(6, 1fr) }
r-grid[col="7"] { --grid-tc: repeat(7, 1fr) }
r-grid[col="8"] { --grid-tc: repeat(8, 1fr) }

/* div=start... */
r-grid > r-cell[div^="1"] { --grid-cs: 1 }
r-grid > r-cell[div^="2"] { --grid-cs: 2 }
r-grid > r-cell[div^="3"] { --grid-cs: 3 }
r-grid > r-cell[div^="4"] { --grid-cs: 4 }
r-grid > r-cell[div^="5"] { --grid-cs: 5 }
r-grid > r-cell[div^="6"] { --grid-cs: 6 }
r-grid > r-cell[div^="7"] { --grid-cs: 7 }
r-grid > r-cell[div^="8"] { --grid-cs: 8 }

/* div=...+width, div=...-end */
r-grid > r-cell[div$="+1"], r-grid > r-cell[div="1"] { --grid-ce: 1 }
r-grid > r-cell[div$="+2"], r-grid > r-cell[div$="-1"], r-grid > r-cell[div="2"] { --grid-ce: 2 }
r-grid > r-cell[div$="+3"], r-grid > r-cell[div$="-2"], r-grid > r-cell[div="3"] { --grid-ce: 3 }
r-grid > r-cell[div$="+4"], r-grid > r-cell[div$="-3"], r-grid > r-cell[div="4"] { --grid-ce: 4 }
r-grid > r-cell[div$="+5"], r-grid > r-cell[div$="-4"], r-grid > r-cell[div="5"] { --grid-ce: 5 }
r-grid > r-cell[div$="+6"], r-grid > r-cell[div$="-5"], r-grid > r-cell[div="6"] { --grid-ce: 6 }
r-grid > r-cell[div$="+7"], r-grid > r-cell[div$="-6"], r-grid > r-cell[div="7"] { --grid-ce: 7 }
r-grid > r-cell[div$="+8"], r-grid > r-cell[div$="-7"], r-grid > r-cell[div="8"] { --grid-ce: 8 }
r-grid > r-cell[div$="-8"] { --grid-ce: 9 }

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

/* for window width <= 600 */
@media only screen and (max-width: 600px) {
  r-grid[col-s="1"] { --grid-tc: repeat(1, 1fr) }
  r-grid[col-s="2"] { --grid-tc: repeat(2, 1fr) }
  r-grid[col-s="3"] { --grid-tc: repeat(3, 1fr) }
  r-grid[col-s="4"] { --grid-tc: repeat(4, 1fr) }
  r-grid[col-s="5"] { --grid-tc: repeat(5, 1fr) }
  r-grid[col-s="6"] { --grid-tc: repeat(6, 1fr) }
  r-grid[col-s="7"] { --grid-tc: repeat(7, 1fr) }
  r-grid[col-s="8"] { --grid-tc: repeat(8, 1fr) }
  
  /* div-s=start... */
  r-grid > r-cell[div-s^="1"] { --grid-cs: 1 }
  r-grid > r-cell[div-s^="2"] { --grid-cs: 2 }
  r-grid > r-cell[div-s^="3"] { --grid-cs: 3 }
  r-grid > r-cell[div-s^="4"] { --grid-cs: 4 }
  r-grid > r-cell[div-s^="5"] { --grid-cs: 5 }
  r-grid > r-cell[div-s^="6"] { --grid-cs: 6 }
  r-grid > r-cell[div-s^="7"] { --grid-cs: 7 }
  r-grid > r-cell[div-s^="8"] { --grid-cs: 8 }
  
  /* div-s=...+width, div-s=...-end */
  r-grid > r-cell[div-s$="+1"], r-grid > r-cell[div-s="1"] { --grid-ce: 1 }
  r-grid > r-cell[div-s$="+2"], r-grid > r-cell[div-s$="-1"], r-grid > r-cell[div-s="2"] { --grid-ce: 2 }
  r-grid > r-cell[div-s$="+3"], r-grid > r-cell[div-s$="-2"], r-grid > r-cell[div-s="3"] { --grid-ce: 3 }
  r-grid > r-cell[div-s$="+4"], r-grid > r-cell[div-s$="-3"], r-grid > r-cell[div-s="4"] { --grid-ce: 4 }
  r-grid > r-cell[div-s$="+5"], r-grid > r-cell[div-s$="-4"], r-grid > r-cell[div-s="5"] { --grid-ce: 5 }
  r-grid > r-cell[div-s$="+6"], r-grid > r-cell[div-s$="-5"], r-grid > r-cell[div-s="6"] { --grid-ce: 6 }
  r-grid > r-cell[div-s$="+7"], r-grid > r-cell[div-s$="-6"], r-grid > r-cell[div-s="7"] { --grid-ce: 7 }
  r-grid > r-cell[div-s$="+8"], r-grid > r-cell[div-s$="-7"], r-grid > r-cell[div-s="8"] { --grid-ce: 8 }
  r-grid > r-cell[div-s$="-8"] { --grid-ce: 9 }
  
  /* connect vars */
  r-grid > r-cell[div-s] { grid-column-end: span var(--grid-ce) }
  r-grid > r-cell[div-s*="+"], r-grid > r-cell[div-s*="-"], r-grid > r-cell[div-s*=".."] {
    grid-column-start: var(--grid-cs) }
  r-grid > r-cell[div-s*="-"], r-grid > r-cell[div-s*=".."] {
    grid-column-end: var(--grid-ce) }
  r-grid > r-cell[div-s="row"] { grid-column: 1 / -1 }
}

/* for window width >= 1600 */
@media only screen and (min-width: 1599px) {
  r-grid[col-l="1"] { --grid-tc: repeat(1, 1fr) }
  r-grid[col-l="2"] { --grid-tc: repeat(2, 1fr) }
  r-grid[col-l="3"] { --grid-tc: repeat(3, 1fr) }
  r-grid[col-l="4"] { --grid-tc: repeat(4, 1fr) }
  r-grid[col-l="5"] { --grid-tc: repeat(5, 1fr) }
  r-grid[col-l="6"] { --grid-tc: repeat(6, 1fr) }
  r-grid[col-l="7"] { --grid-tc: repeat(7, 1fr) }
  r-grid[col-l="8"] { --grid-tc: repeat(8, 1fr) }
  
  /* div-l=start... */
  r-grid > r-cell[div-l^="1"] { --grid-cs: 1 }
  r-grid > r-cell[div-l^="2"] { --grid-cs: 2 }
  r-grid > r-cell[div-l^="3"] { --grid-cs: 3 }
  r-grid > r-cell[div-l^="4"] { --grid-cs: 4 }
  r-grid > r-cell[div-l^="5"] { --grid-cs: 5 }
  r-grid > r-cell[div-l^="6"] { --grid-cs: 6 }
  r-grid > r-cell[div-l^="7"] { --grid-cs: 7 }
  r-grid > r-cell[div-l^="8"] { --grid-cs: 8 }
  
  /* div-l=...+width, div-l=...-end */
  r-grid > r-cell[div-l$="+1"], r-grid > r-cell[div-l="1"] { --grid-ce: 1 }
  r-grid > r-cell[div-l$="+2"], r-grid > r-cell[div-l$="-1"], r-grid > r-cell[div-l="2"] { --grid-ce: 2 }
  r-grid > r-cell[div-l$="+3"], r-grid > r-cell[div-l$="-2"], r-grid > r-cell[div-l="3"] { --grid-ce: 3 }
  r-grid > r-cell[div-l$="+4"], r-grid > r-cell[div-l$="-3"], r-grid > r-cell[div-l="4"] { --grid-ce: 4 }
  r-grid > r-cell[div-l$="+5"], r-grid > r-cell[div-l$="-4"], r-grid > r-cell[div-l="5"] { --grid-ce: 5 }
  r-grid > r-cell[div-l$="+6"], r-grid > r-cell[div-l$="-5"], r-grid > r-cell[div-l="6"] { --grid-ce: 6 }
  r-grid > r-cell[div-l$="+7"], r-grid > r-cell[div-l$="-6"], r-grid > r-cell[div-l="7"] { --grid-ce: 7 }
  r-grid > r-cell[div-l$="+8"], r-grid > r-cell[div-l$="-7"], r-grid > r-cell[div-l="8"] { --grid-ce: 8 }
  r-grid > r-cell[div-l$="-8"] { --grid-ce: 9 }
  
  /* connect vars */
  r-grid > r-cell[div-l] { grid-column-end: span var(--grid-ce) }
  r-grid > r-cell[div-l*="+"], r-grid > r-cell[div-l*="-"], r-grid > r-cell[div-l*=".."] {
    grid-column-start: var(--grid-cs) }
  r-grid > r-cell[div-l*="-"], r-grid > r-cell[div-l*=".."] {
    grid-column-end: var(--grid-ce) }
  r-grid > r-cell[div-l="row"] { grid-column: 1 / -1 }
}

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