:root {
  --site-content-max: 1180px;
  --site-gutter: clamp(18px, 5vw, 72px);
  --site-card-padding: clamp(28px, 4vw, 50px);
}

.content-shell,
.ref-shell,
.blog-shell,
.static-shell {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-left: var(--site-gutter) !important;
  padding-right: var(--site-gutter) !important;
}

.content-shell > .content-hero,
.content-shell > .calculator-stage,
.content-shell > .calculator-engagement,
.content-shell > .public-comments,
.content-shell > .workings-card,
.content-shell > .graph-card,
.content-shell > .affiliate-section,
.content-shell > .content-card,
.content-shell > .calculator-guide,
.content-shell > .related-calculators,
.content-shell > .moved-description,
.content-shell > .calculator-bottom-nav {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.content-shell > .content-card,
.content-shell > .calculator-engagement,
.content-shell > .public-comments,
.content-shell > .workings-card,
.content-shell > .graph-card,
.content-shell > .affiliate-section,
.content-shell > .calculator-guide,
.content-shell > .related-calculators,
.content-shell > .moved-description {
  padding: var(--site-card-padding) !important;
}

.content-shell > .moved-description {
  display: block !important;
  min-width: 0 !important;
  margin-top: 28px !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.content-shell > .moved-description h2,
.content-shell > .moved-description p {
  max-width: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.ref-shell {
  max-width: calc(var(--site-content-max) + 144px) !important;
}

.ref-shell > .ref-hero,
.ref-shell > .ref-card,
.blog-shell > .blog-hero,
.blog-shell > .article-grid,
.blog-shell > .empty-state,
.blog-shell > .blog-description,
.static-shell > .static-hero,
.static-shell > .static-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--site-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ref-shell > .ref-card,
.blog-shell > .blog-description,
.blog-shell > .empty-state,
.static-shell > .static-card {
  padding: var(--site-card-padding) !important;
}

@media (max-width: 650px) {
  :root {
    --site-gutter: 14px;
    --site-card-padding: 24px 18px;
  }

  .content-shell > .content-card,
  .content-shell > .calculator-engagement,
  .content-shell > .public-comments,
  .content-shell > .workings-card,
  .content-shell > .graph-card,
  .content-shell > .affiliate-section,
  .content-shell > .calculator-guide,
  .content-shell > .related-calculators,
  .content-shell > .moved-description,
  .ref-shell > .ref-card,
  .blog-shell > .blog-description,
  .blog-shell > .empty-state,
  .static-shell > .static-card {
    border-radius: 16px !important;
  }
}