/* =========================================================================
   Component — key visual
   A <figure> holding an image or a video. Every <img> and <video> using it
   carries width/height in the markup, so the box is reserved before the file
   arrives (audit rule H-2); the rules here only make that box responsive.
   ========================================================================= */

.visual {
  margin: 0;
}

.visual img,
.visual video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
  background: var(--doc-panel);
}

.visual figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--doc-ink-soft);
}