Collapsible CSS margins for figure tags

In browser default stylesheets, a figure tag has a left and right margin of 40 pixels, regardless of font size:

figure {
  /* TODO */
}

While 40 pixels works for larger screens, it takes up valuable screen real estate on smaller screens. By making the margins relative to the font size—which should decrease on smaller screens—we can set margins that are more in proportion:

figure {
  margin-left: 2em;
  margin-right: 2em;
}

If we know the width of the containing element, we can make the figure responsive by setting its width to 4 ems narrower than the container, and its max-width to 100%. Using automatic margins produces an element with a left- and right margin of 2 ems. If the page resizes until the container is narrower than 36 ems, the figure takes the full width of the page to fill the available space:

figure {
  margin: auto;
  max-width: 100%;
  width: 36em;
}

To match the new figure margins, also update the spacing around lists, blockquotes and definition lists:

figure {
  margin: auto;
  max-width: 100%;
  width: 36em;
}

ul, ol{
  padding-left: 2em;
}

blockquote, dt {
  margin-left: 2em;
}

dt{
  margin-right: 2em;
}