.ms-container,
.ms-container--content,
.ms-container--reading,
.ms-container--wide {
  margin-inline: auto;
  padding-inline: var(--ms-page-gutter);
  width: 100%;
}

.ms-container { max-width: calc(var(--ms-container-standard) + (var(--ms-page-gutter) * 2)); }
.ms-container--content { max-width: calc(var(--ms-container-content) + (var(--ms-page-gutter) * 2)); }
.ms-container--reading { max-width: calc(var(--ms-container-reading) + (var(--ms-page-gutter) * 2)); }
.ms-container--wide { max-width: calc(var(--ms-container-wide) + (var(--ms-page-gutter) * 2)); }

.ms-section { padding-block: var(--ms-section-standard); }
.ms-section--compact { padding-block: var(--ms-section-compact); }
.ms-section--feature { padding-block: var(--ms-section-feature); }

.ms-sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.ms-sr-only:focus,
.ms-sr-only:active {
  clip: auto !important;
  clip-path: none !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  position: static !important;
  white-space: normal !important;
  width: auto !important;
}

.ms-stack > * { margin-block: 0; }
.ms-stack > * + * { margin-block-start: var(--ms-space-6); }
.ms-flow > * + * { margin-block-start: 1em; }
.ms-text-center { text-align: center; }

@media (max-width: 30rem) {
  :root { --ms-page-gutter: 1rem; }
}