/* post: photo */

figure {
  max-width: 800px;
  display: block;
  margin: 10vh auto 40vh auto;
  text-align: center;
}

figure img {
  /*
   * variant 1:
   * - limit to 800px due to container width,
   * - limit height to 90vh to be able to easily scroll a portrait completely into the view,
   * - limit width to 100vh, obviously.
  max-width:  min(800px, 100vw);
  max-height: min(800px,  90vh);
   */

  /*
   * variant 2: also limit to vice-versa values to keep landscapes and portraits the same size.
  max-width:  min(800px, 100vw,  90vh);
  max-height: min(800px,  90vh, 100vw);
   */

  /*
   * variant 3: also increase vice-versa values a bit for some "slack", then landscape/portrait
   * photos would be of different size on tall screens (phones) or wide screens (laptops).
   */
  max-width:  min(800px, 100vw, 110vh);
  max-height: min(800px,  90vh, 120vw);
}

figcaption {
  max-width: 800px;
  margin: 5px;
  font-size: 0.8em;
}

@media screen and (max-width: 800px) {

  figure img {
    max-width: 100%;
  }

}