/*
 * A framed image (ponticlaro_frames_image()): the image service's drawing of
 * the frame, at its own shape. Front end and editor canvas.
 */
.ponticlaro-framed {
  margin: 0;
}

/*
 * margin: 0 -- themes give a figure's image a bottom margin, which would push a
 * frame off-centre in a box that centres it (ponticlaro-v2's Squares).
 */
.ponticlaro-framed__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/*
 * Tones (ponticlaro_frames_tones()): each framed image is drawn for a light page
 * and, where the theme has a dark mode, a dark one. The light frame shows unless
 * <html data-theme="dark">. The hidden <img> is lazy and not displayed, so the
 * browser does not download it.
 */
.ponticlaro-framed__image.is-tone-dark {
  display: none;
}

:root[data-theme='dark'] .ponticlaro-framed__image.is-tone-light {
  display: none;
}

:root[data-theme='dark'] .ponticlaro-framed__image.is-tone-dark {
  display: block;
}