/* Shared by the reader, rich editor and server-rendered editor preview. */
:is(.article-body, .rich-content, .rendered-markdown) {
  display: flow-root;
  container-type: inline-size;
}
:is(.article-body, .rich-content, .rendered-markdown) .article-image {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin: 22px 0;
  break-inside: avoid;
}
:is(.article-body, .rich-content, .rendered-markdown) .article-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--radius, 4px);
}
.article-image > .media-open { width: 100%; }
:is(.article-body, .rich-content, .rendered-markdown) .article-image figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
:is(.article-body, .rich-content, .rendered-markdown) > :is(h1,h2,h3,h4,h5,h6,table,pre,hr,.article-end,.inline-media-credits,.shared-lore) {
  clear: both;
}
@container (min-width: 540px) {
  :is(.article-body, .rich-content, .rendered-markdown) .article-image-left {
    float: left;
    width: 42%;
    max-width: 280px;
    margin: 4px 26px 18px 0;
  }
  :is(.article-body, .rich-content, .rendered-markdown) .article-image-right {
    float: right;
    width: 42%;
    max-width: 280px;
    margin: 4px 0 18px 26px;
  }
}
@media print {
  .article-image { float: none !important; width: 100% !important; }
}