figure {
  margin: 0 auto; /*center the content*/
  margin-bottom: 1em; /*skip-a-doodle*/
  width: 50%;
}
figure img, figure > video { /*VIDEO is a GIF converted to MP4*/
  border: 1px solid dimgray;
  width: 100%;
}
figure .none { border: 0 } /*IMG or VIDEO*/
figure figcaption {
  font: 0.9em Vollkorn, serif;
  line-height: calc(0.9em * 1.5);
  padding-left: 1ch;
  padding-right: 1ch;
}
figure.full-width { width: calc(100% - 2em) }
figure.full-width img { width: 100% }
figure.left, figure.right { /*FIGURE cannot be wrapped in P*/
  margin-left: 1em;
  margin-right: 1em;
  width: 33%;
}
figure.left { float: left }
figure.right { float: right }

@media only screen and (max-width: 600px) { /*ruler breakpoint*/
  figure { width: 100% } /*full-width*/
  figure img, figure video {
    border-left: 0;
    border-right: 0;
  }
  aside figure img, aside figure video { /*corrects above*/
    border-left: 1px solid dimgray;
    border-right: 1px solid dimgray;
  }
  figure.full-width, figure.left, figure.right {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  figure.left, figure.right { float: none }
}