.table {
  --cell-spacing: 20px;
  --border: 1px solid var(--border-color);

  border-collapse: collapse;
  font-size: calc(14rem / var(--initial-font-multiplier));
  width: 100%;
}

.table__row {
  border-bottom: var(--border);
}

.table__row:empty {
  border-bottom: none;
}

.table__cell {
  padding: var(--cell-spacing);
  position: relative;
  vertical-align: top;
  text-align: left;
}

.table__cell + .table__cell::before {
  content: '';
  position: absolute;
  top: var(--cell-spacing);
  bottom: var(--cell-spacing);
  left: 0;
  border-left: var(--border);
}

/* Table head overwrite */
.table__head {
  --cell-bg-1: var(--light-gray-color);
  /** Little darker than --light-gray-color*/
  --cell-bg-2: hsl(240, 12%, 94%);
  --border: none;

  font-size: calc(18rem / var(--initial-font-multiplier));
  font-weight: bold;
}

.table__head .table__cell {
  vertical-align: top;
  text-align: left;
  padding: calc(var(--cell-spacing) / 2) var(--cell-spacing);
}

.table__head .table__cell:nth-child(2n+1) {
  background: var(--cell-bg-1);
}

.table__head .table__cell:nth-child(2n) {
  background: var(--cell-bg-2);
}

:root.root--special .table {
  --border: 1px solid var(--special-text-color);
  border: var(--border);
}

:root.root--special .table__cell {
  background: var(--special-background-color);
}

@media screen and (max-width: 735px) {
  .table__head {
    display: none;
  }

  .table__row {
    display: flex;
    flex-direction: column;
  }

  .table__row:first-of-type:not(:empty) {
    border-top: var(--border);
  }


  .table__cell + .table__cell::before {
    left: var(--cell-spacing);
    right: var(--cell-spacing);
    top: 0;
    bottom: unset;
    border-left: unset;
    border-top: var(--border);
  }
}