/// based on Raster v20 (release package) (rsms.me/raster)

u-grid {
  --grid-tc: repeat(4, 1fr);
  --grid-ce: -1;
  --grid-cs: 1;
  display: grid;
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  grid-template-columns: var(--grid-tc);

  &.compact { grid-row-gap: 0; }

  &.debug {
    > *  {
      --color: rgba(248, 110, 91, 0.3);
      background-image: linear-gradient(180deg, var(--color) 0, var(--color));
    }

    > :nth-child(6n+2) {
      --color: rgba(103, 126, 208, 0.3);
    }

    > :nth-child(6n+3) {
      --color: rgba(224, 174, 72, 0.3);
    }

    > :nth-child(6n+4) {
      --color: rgba(77, 214, 115, 0.3);
    }

    > :nth-child(6n+5) {
      --color: rgba(217, 103, 219, 0.3);
    }

    > :nth-child(6n+6) {
      --color: rgba(94, 204, 211, 0.3);
    }

    > :nth-child(6n+7) {
      --color: rgba(248, 110, 91, 0.3);
    }
  }

  > hr { grid-column: 1 / -1; }

  > hr,
  > hr:not(:first-child):not(:last-child) {
    margin-top: calc(var(--line-height) - var(--hr-thickness));
    margin-bottom: 0;
  }

  > u-cell {
    appearance: none;
    display: block;

    &[span] { grid-column-end: span var(--grid-ce); }
    &[span*="+"], &[span*="-"], &[span*=".."] { grid-column-start: var(--grid-cs); }
    &[span*="-"], &[span*=".."] { grid-column-end: var(--grid-ce); }
    &[span=row] { grid-column: var(--grid-cs) / var(--grid-ce); }

    &[span^="1"] { --grid-cs: 1; }
    &[span^="2"] { --grid-cs: 2; }
    &[span^="3"] { --grid-cs: 3; }
    &[span^="4"] { --grid-cs: 4; }
    &[span^="5"] { --grid-cs: 5; }
    &[span^="6"] { --grid-cs: 6; }
    &[span^="7"] { --grid-cs: 7; }
    &[span^="8"] { --grid-cs: 8; }
    &[span^="9"] { --grid-cs: 9; }
    &[span^="10"] { --grid-cs: 10; }
    &[span^="11"] { --grid-cs: 11; }
    &[span^="12"] { --grid-cs: 12; }
    &[span^="13"] { --grid-cs: 13; }
    &[span^="14"] { --grid-cs: 14; }
    &[span^="15"] { --grid-cs: 15; }
    &[span^="16"] { --grid-cs: 16; }
    &[span^="17"] { --grid-cs: 17; }
    &[span^="18"] { --grid-cs: 18; }
    &[span^="19"] { --grid-cs: 19; }
    &[span^="20"] { --grid-cs: 20; }
    &[span^="21"] { --grid-cs: 21; }
    &[span^="22"] { --grid-cs: 22; }
    &[span^="23"] { --grid-cs: 23; }
    &[span^="24"] { --grid-cs: 24; }
    &[span^="25"] { --grid-cs: 25; }
    &[span^="26"] { --grid-cs: 26; }
    &[span^="27"] { --grid-cs: 27; }
    &[span^="28"] { --grid-cs: 28; }
    &[span^="29"] { --grid-cs: 29; }
    &[span^="30"] { --grid-cs: 30; }

    &[span$="+1"], &[span="1"] { --grid-ce: 1; }
    &[span$="+2"], &[span$="-1"], &[span="2"] { --grid-ce: 2; }
    &[span$="+3"], &[span$="-2"], &[span="3"] { --grid-ce: 3; }
    &[span$="+4"], &[span$="-3"], &[span="4"] { --grid-ce: 4; }
    &[span$="+5"], &[span$="-4"], &[span="5"] { --grid-ce: 5; }
    &[span$="+6"], &[span$="-5"], &[span="6"] { --grid-ce: 6; }
    &[span$="+7"], &[span$="-6"], &[span="7"] { --grid-ce: 7; }
    &[span$="+8"], &[span$="-7"], &[span="8"] { --grid-ce: 8; }
    &[span$="+9"], &[span$="-8"], &[span="9"] { --grid-ce: 9; }
    &[span$="+10"], &[span$="-9"], &[span="10"] { --grid-ce: 10; }
    &[span$="+11"], &[span$="-10"], &[span="11"] { --grid-ce: 11; }
    &[span$="+12"], &[span$="-11"], &[span="12"] { --grid-ce: 12; }
    &[span$="+13"], &[span$="-12"], &[span="13"] { --grid-ce: 13; }
    &[span$="+14"], &[span$="-13"], &[span="14"] { --grid-ce: 14; }
    &[span$="+15"], &[span$="-14"], &[span="15"] { --grid-ce: 15; }
    &[span$="+16"], &[span$="-15"], &[span="16"] { --grid-ce: 16; }
    &[span$="+17"], &[span$="-16"], &[span="17"] { --grid-ce: 17; }
    &[span$="+18"], &[span$="-17"], &[span="18"] { --grid-ce: 18; }
    &[span$="+19"], &[span$="-18"], &[span="19"] { --grid-ce: 19; }
    &[span$="+20"], &[span$="-19"], &[span="20"] { --grid-ce: 20; }
    &[span$="+21"], &[span$="-20"], &[span="21"] { --grid-ce: 21; }
    &[span$="+22"], &[span$="-21"], &[span="22"] { --grid-ce: 22; }
    &[span$="+23"], &[span$="-22"], &[span="23"] { --grid-ce: 23; }
    &[span$="+24"], &[span$="-23"], &[span="24"] { --grid-ce: 24; }
    &[span$="+25"], &[span$="-24"], &[span="25"] { --grid-ce: 25; }
    &[span$="+26"], &[span$="-25"], &[span="26"] { --grid-ce: 26; }
    &[span$="+27"], &[span$="-26"], &[span="27"] { --grid-ce: 27; }
    &[span$="+28"], &[span$="-27"], &[span="28"] { --grid-ce: 28; }
    &[span$="+29"], &[span$="-28"], &[span="29"] { --grid-ce: 29; }
    &[span$="+30"], &[span$="-29"], &[span="30"] { --grid-ce: 30; }
    &[span$="-30"] { --grid-ce: 31; }

    &.h1, &.h2, &.h3, &.h4, &.h5, &.h6 { margin-bottom: 0; }

    > img,
    > p > img {
      max-width: 100%;
      object-fit: contain;
    }
  }

  &[columns="1"] { --grid-tc: repeat(1, 1fr); }
  &[columns="2"] { --grid-tc: repeat(2, 1fr); }
  &[columns="3"] { --grid-tc: repeat(3, 1fr); }
  &[columns="4"] { --grid-tc: repeat(4, 1fr); }
  &[columns="5"] { --grid-tc: repeat(5, 1fr); }
  &[columns="6"] { --grid-tc: repeat(6, 1fr); }
  &[columns="7"] { --grid-tc: repeat(7, 1fr); }
  &[columns="8"] { --grid-tc: repeat(8, 1fr); }
  &[columns="9"] { --grid-tc: repeat(9, 1fr); }
  &[columns="10"] { --grid-tc: repeat(10, 1fr); }
  &[columns="11"] { --grid-tc: repeat(11, 1fr); }
  &[columns="12"] { --grid-tc: repeat(12, 1fr); }
  &[columns="13"] { --grid-tc: repeat(13, 1fr); }
  &[columns="14"] { --grid-tc: repeat(14, 1fr); }
  &[columns="15"] { --grid-tc: repeat(15, 1fr); }
  &[columns="16"] { --grid-tc: repeat(16, 1fr); }
  &[columns="17"] { --grid-tc: repeat(17, 1fr); }
  &[columns="18"] { --grid-tc: repeat(18, 1fr); }
  &[columns="19"] { --grid-tc: repeat(19, 1fr); }
  &[columns="20"] { --grid-tc: repeat(20, 1fr); }
  &[columns="21"] { --grid-tc: repeat(21, 1fr); }
  &[columns="22"] { --grid-tc: repeat(22, 1fr); }
  &[columns="23"] { --grid-tc: repeat(23, 1fr); }
  &[columns="24"] { --grid-tc: repeat(24, 1fr); }
  &[columns="25"] { --grid-tc: repeat(25, 1fr); }
  &[columns="26"] { --grid-tc: repeat(26, 1fr); }
  &[columns="27"] { --grid-tc: repeat(27, 1fr); }
  &[columns="28"] { --grid-tc: repeat(28, 1fr); }
  &[columns="29"] { --grid-tc: repeat(29, 1fr); }
  &[columns="30"] { --grid-tc: repeat(30, 1fr); }
}

[flow-cols] {
  column-fill: balance;
  column-gap: var(--column-gap);
}

[flow-cols="1"] { column-count: 1; }
[flow-cols="2"] { column-count: 2; }
[flow-cols="3"] { column-count: 3; }
[flow-cols="4"] { column-count: 4; }
[flow-cols="5"] { column-count: 5; }
[flow-cols="6"] { column-count: 6; }
[flow-cols="7"] { column-count: 7; }
[flow-cols="8"] { column-count: 8; }