.grid {
  margin-left: calc(1 / 2 * var(--unit-space));
  margin-right: calc(1 / 2 * var(--unit-space));
}

.grid-row {
  align-items: stretch;
  background-color: var(--color-bg-box);
  box-sizing: border-box;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 calc(-1 / 2 * var(--unit-space)) var(--grid-outermargin-s);
}

.grid-row > .grid-row,
.grid-show-gap {
  margin-left: 0;
  margin-right: 0;
}

.grid-cell {
  box-sizing: border-box;
  margin-left: calc(1 / 2 * var(--unit-space));
  margin-right: calc(1 / 2 * var(--unit-space));
  padding: var(--unit-space);
}

.grid-cell,
.x1 {
  flex: 1 1 var(--unit-modul-s);
  max-width: var(--unit-modul-l);
  min-width: var(--unit-modul-s);
}

.grid-nested {
  margin-left: calc(1 / 2 * var(--unit-space));
  margin-right: calc(1 / 2 * var(--unit-space));
}

.grid-show-gap .grid-row {
  background-color: transparent;
  margin-bottom: 0;
}

.grid-show-gap .grid-cell {
  background-color: var(--color-bg-box);
  margin-bottom: var(--grid-outermargin-s);
}

.x2 {
  flex-basis: var(--unit-modul-m);
  max-width: var(--unit-modul-l);
}

.x3 {
  flex-basis: var(--unit-modul-l);
  max-width: var(--unit-modul-l);
}

/* var(--page-size-m) = 665px - vars not usable in queries */
@media (min-width: 665px) {
  .grid-row {
    margin: 0 calc(-1 / 2 * var(--unit-space)) var(--grid-outermargin-m);
  }

  .grid-show-gap .grid-cell {
    margin-bottom: var(--grid-outermargin-m);
  }

  .x1-fix {
    max-width: var(--unit-modul-s);
  }
}

/* var(--page-size-l) = 998px - vars not usable in queries */
@media (min-width: 998px) {
  .grid {
    margin: 0 auto;
    max-width: var(--unit-modul-l);
    padding: 0 calc(1 / 2 * var(--unit-space));
  }

  .grid-show-gap {
    padding: 0;
  }

  .grid-cell {
    padding: calc(2 * var(--unit-space));
  }
}
