/* Light canvas and a single centered column.
   html/body had no background, so a dark browser canvas showed through
   behind the near-black copy. The CNN grid also parks the article in
   column 2 on wide viewports. */
html {
  color-scheme: only light;
  background-color: #fff !important;
}

body.layout-article-elevate {
  margin: 0 !important;
  background-color: #fff !important;
  color: #0c0c0c !important;
}

body.layout-article-elevate .layout-article-elevate__content-wrapper {
  box-sizing: border-box !important;
  width: min(660px, calc(100% - 32px)) !important;
  max-width: 660px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.layout-article-elevate .layout-article-elevate__wrapper,
body.layout-article-elevate .layout-article-elevate__main,
body.layout-article-elevate .layout-article-elevate__left,
body.layout-article-elevate .layout-article-elevate__center,
body.layout-article-elevate .layout-article-elevate__right,
body.layout-article-elevate .article__main,
body.layout-article-elevate .article__lede-wrapper,
body.layout-article-elevate .lede-intro,
body.layout-article-elevate .article__content,
body.layout-article-elevate .article__content-container {
  display: block !important;
  float: none !important;
  position: static !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  grid-area: auto !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

body.layout-article-elevate .lede-intro p,
body.layout-article-elevate .article__content p {
  max-width: 100% !important;
  overflow-wrap: break-word;
}

body.layout-article-elevate img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}
