/* Center — max-width container primitive.
 * Centers content horizontally and caps it at a content tier so reading
 * line-length stays sane on wide viewports. See CenterComponent.
 */

.center {
  margin-inline: auto;
  width: 100%;
}

.center--max-sm { max-width: 640px;  }
.center--max-md { max-width: 960px;  }
.center--max-lg { max-width: 1200px; }
.center--max-xl { max-width: 1440px; }

.center--padding-none { padding-inline: 0;       }
.center--padding-sm   { padding-inline: 0.75rem; }
.center--padding-md   { padding-inline: 1.25rem; }
.center--padding-lg   { padding-inline: 2rem;    }