:root {
  --space-containers: 12vw;
  --max-container-size: 1200px;

  --container-effective-width: min(
    var(--max-container-size),
    calc(100% - var(--space-containers))
  );
}

.container-full {
  width: 100%;
  position: relative;
}

.container-wide {
  width: 100%;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.container {
  width: calc(100% - var(--space-containers));
  max-width: var(--max-container-size);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.container-pushed-right {
  position: relative;
  width: auto;
  margin-left: calc((100% - (var(--container-effective-width))) / 2);
  margin-right: 0;
  background-color: var(--primary);
}

.container-pushed-left {
  position: relative;
  width: auto;
  margin-right: calc((100% - var(--container-effective-width)) / 2);
  margin-left: 0;
  background-color: var(--primary);
}

.container-narrow {
  position: relative;
  width: calc(100% - var(--space-containers));
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.container-blog {
  position: relative;
  width: calc(100% - var(--space-containers));
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  /*Safari <16.4 sometimes fails to re-evaluate this when viewport resizes. So lets redefine it inside a @media query*/
  :root {
    --container-effective-width: calc(100% - var(--space-containers));
  }

  .container-pushed-left {
    width: calc(100% - var(--space-containers));
    max-width: var(--max-container-size);
    margin-left: auto;
    margin-right: auto;
  }

  .container-pushed-right {
    width: calc(100% - var(--space-containers));
    max-width: var(--max-container-size);
    margin-left: auto;
    margin-right: auto;
  }
}