/* ---------- One grid for the whole site ----------
   Content is at most 1280px wide, with the same gutter on both sides.
   The nav, every section and the footer all share these edges. */
:root { --gutter: 40px; --content: 1280px; }
@media (max-width: 991px) { :root { --gutter: 32px; } }
@media (max-width: 767px) { :root { --gutter: 20px; } }

.padding-global { padding-left: 0 !important; padding-right: 0 !important; }
.container-large {
  width: 100% !important; max-width: calc(var(--content) + 2 * var(--gutter)) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
  box-sizing: border-box;
}
/* a container inside a container doesn't add a second gutter */
.container-large .container-large { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* the nav lines up with the content */
.site-nav { max-width: calc(var(--content) + 2 * var(--gutter)) !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }