.container {
  --site-margin-pct: 7;

  margin-inline: auto;
  padding-inline: 0.75rem;
  width: 100%;
  max-width: var(--container-width-full);
}

.container--full {
  padding-inline: 0;
}

.container--text {
  max-width: var(--container-width-narrow);
}

.container--medium {
  max-width: calc(
    var(--container-width-medium) +
      (
        min(
            (100% / 100) * var(--site-margin-pct),
            120rem / 100 * var(--site-margin-pct)
          ) *
          2
      )
  );
}

.container--blog {
  max-width: calc(
    var(--container-width-blog) +
      (
        min(
            (100% / 100) * var(--site-margin-pct),
            120rem / 100 * var(--site-margin-pct)
          ) *
          2
      )
  );
}

@media (min-width: 768px) {
  .container {
    padding-inline: 2rem;
  }

  .container--text {
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: min(
      (100% / 100) * var(--site-margin-pct),
      120rem / 100 * var(--site-margin-pct)
    );
  }

  .container--full {
    padding-inline: 0;
  }

  .container--text {
    max-width: calc(
      var(--container-width-text) +
        (
          min(
              (100% / 100) * var(--site-margin-pct),
              120rem / 100 * var(--site-margin-pct)
            ) *
            2
        )
    );
  }
}