/* Site-wide image styles for the AD&D EE wikis.
 *
 * .wiki-banner       — slim banner auto-injected above every page's content
 *                      by overrides/main.html (see tools/make_banners.py for
 *                      the artwork pipeline).
 * .wiki-banner--hero — taller variant used on the landing page and the
 *                      per-game index pages.
 * .float-right /     — hand-placed detail images in page markdown, via
 * .wiki-figure         attr_list / md_in_html.
 */

/* --- auto-injected banners ------------------------------------------------ */

.wiki-banner {
  margin: 0 0 1.2rem;
}

.wiki-banner img {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  border-radius: 0.2rem;
}

.wiki-banner--hero img {
  height: 17rem;
}

@media screen and (max-width: 44.9375em) {
  .wiki-banner img {
    height: 6.5rem;
  }

  .wiki-banner--hero img {
    height: 11rem;
  }
}

@media print {
  .wiki-banner {
    display: none;
  }
}

/* --- hand-placed detail images ------------------------------------------- */

.md-typeset img.float-right,
.md-typeset figure.float-right {
  float: right;
  max-width: min(40%, 20rem);
  margin: 0 0 0.8rem 1rem;
}

.md-typeset figure.wiki-figure {
  margin-top: 0;
}

.md-typeset figure.wiki-figure img {
  border-radius: 0.2rem;
}

.md-typeset figure.wiki-figure figcaption {
  max-width: 100%;
  font-size: 0.64rem;
  opacity: 0.7;
  text-align: center;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset img.float-right,
  .md-typeset figure.float-right {
    float: none;
    max-width: 100%;
    margin: 0.8rem 0;
  }
}