:root {
  --supporting-shell-max: 960px;
  --supporting-shell-gutter: clamp(20px, 5vw, 48px);
}

body > .breadcrumb,
main > .breadcrumb,
.page-wrap,
main.wrap,
.page-header,
.explainer,
.related-tools {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--supporting-shell-max);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--supporting-shell-gutter);
  padding-left: var(--supporting-shell-gutter);
}

.explainer,
.related-tools {
  max-width: var(--supporting-shell-max) !important;
  padding-right: var(--supporting-shell-gutter) !important;
  padding-left: var(--supporting-shell-gutter) !important;
}

.em-modal {
  width: calc(
    100% - var(--supporting-shell-gutter) - var(--supporting-shell-gutter)
  );
  max-width: calc(
    var(--supporting-shell-max) -
      var(--supporting-shell-gutter) -
      var(--supporting-shell-gutter)
  );
  margin-right: auto;
  margin-left: auto;
}
