/* Unified page width and gutters across the site */

:root {
  --container: 1140px;
  --container-admin: none;
  --container-prose: 800px;
  --page-gutter: 24px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
}

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

.site-header .container,
.site-footer .container,
.footer .container {
  overflow: visible;
}

.page-area > .container,
.shell > .container:not(.container--admin):not(.container--plans-wide),
.dashboard > .container,
.messenger-page > .container {
  max-width: var(--container);
}

.static-page__container {
  max-width: var(--container-prose);
}

.container--plans-wide,
.container--admin {
  max-width: var(--container-admin, none);
  width: 100%;
}

@media (max-width: 1180px) {
  :root {
    --page-gutter: 20px;
  }
}

@media (max-width: 820px) {
  :root {
    --page-gutter: 16px;
  }
}

@media (max-width: 570px) {
  :root {
    --page-gutter: 12px;
  }
}