:root {

  --grid-columns: 12;
  --grid-gutter: 4px;
  --grid-margin: 56px;
  --grid-content-width-fluid: calc(100% - (var(--grid-margin) * 2));
  --grid-content-width-locked: min(1330px, var(--grid-content-width-fluid));
  --grid-content-width-wide: var(--grid-content-width-fluid);
  --grid-content-width: var(--grid-content-width-locked);

  --maxw: var(--grid-content-width);
}

@media (min-width: 1920px) {
  :root {
    --grid-content-width: var(--grid-content-width-wide);
  }
}

@media (max-width: 1200px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 4px;
    --grid-margin: 28px;
    --grid-content-width: var(--grid-content-width-fluid);
  }
}

@media (max-width: 767px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: 4px;
    --grid-margin: 10px;
    --grid-content-width: var(--grid-content-width-fluid);
  }
}