/* Shared layout sizes. Change --content-width to scale the site's content.
   Override a derived variable here only when that layout needs a different size. */
:root {
  --content-width: 1200px;
  --reading-width: calc(var(--content-width) * .65);
  --compact-width: calc(var(--content-width) * .5);
  --content-image-width: calc(var(--content-width) * .35);
  --hero-text-width: calc(var(--content-width) * .54);
  --home-boxes-width: 1600px;
  --circle-width: calc(var(--content-width) * .25);
  --feature-card-width: var(--reading-width);
  --content-gutter: 24px;
  --admin-content-width: calc(var(--content-width) + 200px);
}
@media(max-width:600px) {
  :root { --content-gutter:16px; --circle-width:calc(var(--content-width) * .217); }
}