figure.css

img {
  margin: 1.25em 1.25em 1.5em;
  cursor: zoom-in;
  height: auto;
}

img.zoomed {
  cursor: zoom-out;
}

table img {
  margin: 0
}

.image-container, .left, .left .side, .right, .right .side, figure {
  max-width: 75%
}

.left img {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

.right img {
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}

figure:nth-child(even), .left, figure.left, figure.left.side {
  float: left;
  margin-left: 0;
  margin-right: 1.5em
}

figure:nth-child(odd), .right, figure.right, figure.right.side {
  float: right;
  margin-left: 1.5em;
  margin-right: 0
}

caption, figcaption {
  font-size: 0.8em;
  color: dimgray;
  margin: 0;
  caption-side: bottom;
  background: inherit;
  width: 0;
  min-width: 100%;
}

figure {
  position: relative;
  z-index: 1;
  max-height: 90%;
  transition: background-color .2s ease-out
}

figure ul {
  padding-left: 1em;
}

figure.video {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  width: 100%;
}

figure img {
  margin: 0;
}

figure:hover {
  background-color: rgba(127, 127, 127, 0.1);
}

figure iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

figure:hover figcaption, figcaption:hover {
  color: black;
}

.right figcaption, .right .side figcaption {
  text-align: right
}

.left figcaption, .left.side figcaption {
  text-align: left
}

@media (prefers-color-scheme: dark) {

  figcaption {
    color: darkgray;
  }

  figure:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  figure:hover figcaption, figcaption:hover {
    color: white;
  }
}