* { box-sizing: border-box; }

:root {
  --grid-columns: 10;
  --grid-fixed-columns: 5;
}

body {
  font-family: Geologica;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  margin: 0;
}

h2 { font-size: 1.5em; font-weight: 500; margin: .5em 0 .75em; text-align: center; text-transform: none; }
main { margin: 0 auto; max-width: 1200px; }

.grid { display: grid; grid-template-columns: max-content repeat(calc(var(--grid-columns) - 1), minmax(min-content, 1fr)); }
.header { display: contents; font-weight: bold; text-align: center; }
.header > div { padding-inline: .3rem; }
.row { display: contents; }
.grid > * > div { border-inline-start: solid 1px #ccc; border-block-start: solid 1px #ccc; }
.grid > * > div:last-child { border-inline-end: solid 1px #ccc; }
.grid > *:last-child > div { border-block-end: solid 1px #ccc; }


/* @media screen and (max-width: 1000px) {
   body { font-size: 12px; }
  .grid { margin-inline: .3rem; grid-template-columns: max-content repeat(calc(var(--grid-fixed-columns) - 1), minmax(min-content, 1fr)); cursor: pointer; }
  .grid > * > div:nth-child(3) { border-inline-end: solid 1px #ccc; }
  .grid > * > div:nth-child(n + 4) { display: none; }
  .grid > .row:hover > * { background-color: #ddd; }
  .grid > .row.selected { background-color: #999; }
  .grid > .row.selected > div { grid-column: 2 / -1; font-weight: 500; }
  .grid > .row.selected > div:nth-child(n+4) { display: unset; font-weight: 100; }
} */

#mitroo-simvoulon {
  font-size: 12px;
  --grid-columns: 6;
  --grid-fixed-columns: 3;
}