:root {
  --app-max-width: 1680px;
  --content-max-width: 840px;
  --app-padding-x: 28px;
  --app-padding-y: 24px;
  --app-top-space: 20px;
}

body.agency-hub-shell-child {
  background: #f4f5f7;
}

body.agency-hub-shell-child .app-shell__inner {
  width: min(100%, var(--app-max-width));
}

body.agency-hub-shell-child .content-shell__inner {
  width: min(100%, var(--content-max-width));
}

body.page-template-template-app.agency-hub-shell-child,
body.page-template-template-full-width.agency-hub-shell-child,
body.page-template-template-blank.agency-hub-shell-child {
  --app-max-width: 1680px;
  --app-padding-x: 28px;
  --app-top-space: 20px;
}

body.page-template-template-app.agency-hub-shell-child .app-shell__inner,
body.page-template-template-full-width.agency-hub-shell-child .app-shell__inner,
body.page-template-template-blank.agency-hub-shell-child .app-shell__inner,
body.page-template-template-app.agency-hub-shell-child #app.app-shell > .app-shell__inner,
body.page-template-template-full-width.agency-hub-shell-child #app.app-shell > .app-shell__inner,
body.page-template-template-blank.agency-hub-shell-child #app.app-shell > .app-shell__inner {
  width: min(100%, var(--app-max-width)) !important;
  max-width: var(--app-max-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--app-padding-x) !important;
  box-sizing: border-box !important;
}

body.page-client-portal.page-template-template-app.agency-hub-shell-child,
body.page-client-portal.page-template-template-full-width.agency-hub-shell-child,
body.page-client-portal.page-template-template-blank.agency-hub-shell-child {
  --app-max-width: 1760px;
}

body.page-template-template-docs.agency-hub-shell-child,
body.blog.agency-hub-shell-child,
body.single-post.agency-hub-shell-child {
  --content-max-width: 840px;
}

@media (max-width: 767px) {
  :root {
    --app-padding-x: 16px;
    --app-padding-y: 16px;
    --app-top-space: 16px;
  }

  body.page-template-template-app.agency-hub-shell-child,
  body.page-template-template-full-width.agency-hub-shell-child,
  body.page-template-template-blank.agency-hub-shell-child {
    --app-padding-x: 16px;
    --app-top-space: 16px;
  }
}