/* Margin:8px via the parent; parent has margin:-8px */
/* (400+2*8)*1 - 2*8 = 400 */
/* (400+2*8)*2 - 2*8 = 816 */
/* (400+2*8)*3 - 2*8 = 1232 */
/* (400+2*8)*4 - 2*8 = 1648 */
/* (400+2*8)*5 - 2*8 = 2064 */
/* Add 20px for body margins on both sides and 16px for scroll bar */
:root {
  --article-width: 400px;
}
.article {
  width: var(--article-width);
}
#content,
.content {
  max-width: var(--article-width);
}
/* var cannot be used in @media queries: 
   https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries */
@media screen and (min-width: calc(816px + 36px)) {
  #content,
  .content {
    max-width: 816px;
  }
}
@media screen and (min-width: calc(1232px + 36px)) {
  #content,
  .content {
    max-width: 1232px;
  }
}
@media screen and (min-width: calc(1648px + 36px)) {
  #content,
  .content {
    max-width: 1648px;
  }
}
@media screen and (min-width: calc(2064px + 36px)) {
  #content,
  .content {
    max-width: 2064px;
  }
}