:root {
  --max-w-regular: 740px;
  --max-w-wide: 1032px;
  --max-w-full: 100%;
}

.max-w-container{
  max-width: none;
  display: flex;
  flex-direction: column;
  margin-inline: calc(-.5 * var(--gutter-x, 0));
  padding-inline: calc(var(--gutter-x) * .5);
}

.max-w-container > * {
  max-width: var(--max-w-regular);
  height: auto;
  width: 100%;
}

.max-w-container > img {
  width: auto;
}

.max-w-container,
.max-w-wide,
.max-w-regular,
.max-w-full{
  img {
    max-width: 100%;
    height: auto;
  }
}

.max-w-regular {
  max-width: var(--max-w-regular);
}

.max-w-wide {
  width: 100%;
  max-width: var(--max-w-wide);
}

.max-w-full {
  max-width: none;
  width: calc(100% + calc(1 * var(--gutter-x, 0)));
}