/* Step 2b — screenshots of the app inside a guide.
   Applied with attr_list: ![alt](img/foo.png){ .doc-shot } */

.doc-shot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.25rem 0;

  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* A dark-mode reader gets a light screenshot; soften it so it doesn't glare,
   and bring it to full brightness on hover for a proper look. */
[data-md-color-scheme="slate"] .doc-shot {
  filter: brightness(0.9);
  transition: filter 120ms ease-in-out;
}

[data-md-color-scheme="slate"] .doc-shot:hover {
  filter: none;
}

/* Optional caption: put the image in a <figure> when the shot needs a pointer. */
.doc-shot + em,
figure.doc-figure figcaption {
  display: block;
  margin-top: -0.5rem;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}