:root {
  --cols: 12;
  --f: 2;
  --grid-ratio: calc(var(--cols) * var(--f));
}

/* wrappers */
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--grid-ratio), minmax(0, 1fr));
  /*grid-template-rows: auto 1fr auto;*/
}

.wrapper main {
  grid-row: 2;
  grid-column: 1/-1;
  /*padding-bottom: calc(var(--spacer) * 4);*/
  padding-bottom: 0;
}

/* containers */

.container {
  grid-column: 1/12;
}

.container-full {
  grid-column: -1/1;
}

@media (min-width: 1200px) {

  .container {
    grid-column: 2 / span calc(var(--grid-ratio) -1);
  }

}