/*
 * media.css — portfolio-wide defaults for inline media inside articles.
 *
 * Imported via:
 *   <link rel="stylesheet" href="https://assets.gf.cx/media/media.css">
 *
 * Rules apply inside `article` so list/landing pages can use their own
 * sizing without interference.
 *
 * Host can override the video cap by setting --media-video-max-width
 * (e.g. `:root { --media-video-max-width: 600px }`).
 */

article video {
  max-width: min(100%, var(--media-video-max-width, 460px));
  height: auto;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.14));
  border-radius: 4px;
  margin: 8px 0;
  display: block;
}

article img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.14));
  border-radius: 4px;
  margin: 8px 0;
  display: block;
}

article audio {
  max-width: min(100%, var(--media-audio-max-width, 460px));
  margin: 8px 0;
  display: block;
}