* { font-family: sans-serif; }

    @media (max-width: 800px) {
        hr-s { display: block;
	       margin-top: 0.5em;
	       margin-bottom: 0.5em;
	       margin-left: auto;
	       margin-right: auto;
	       border-style: inset;
	       border-width: 1px; }
	.noshow-s { display: none; }
	.adapt-list-right-s { display: flex;
                              justify-content: space-between; }
        .adapt-list-left-s {  }
    }
    @media (min-width: 800px) {
        hr-s {  }
        .adapt-list-right-s { float: right;
                              text-align: right; }
        .adapt-list-left-s { float: left; }
    }

.left
{
  float: left;
}

.right
{
  float: right;
  text-align: right;
}

.spread
{
  display: flex;
  justify-content: space-between;
}

/* Raster grid subsystem (rsms.me/raster) */
r-grid {
  display: grid;
  --grid-tc: repeat(3, 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; margin: 10px }

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

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

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

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

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

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