/* Render the small result previews in the tutorials inside a framed box so the
   transformed HTML is visually separated from the surrounding prose. */
.xslt-result {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  padding: 0.6rem 0.8rem;
  margin: 1em 0;
  background-color: var(--md-code-bg-color);
}
.xslt-result > :first-child {
  margin-top: 0;
}
.xslt-result > :last-child {
  margin-bottom: 0;
}

/* Cover/hero image on the landing page: full content width, gently rounded,
   with a subtle frame so it sits cleanly above the intro text. */
.cover-image img,
img.cover-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0.4rem;
  margin: 0.5em 0 1.2em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}