/* Right-floating wiki-like infobox */
.md-typeset .infobox {
  float: right;
  width: 320px;                 /* tweak to taste */
  margin: 0 0 1rem 1.25rem;     /* space to the left */
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
  box-shadow: var(--md-shadow-z2);
}

.md-typeset .infobox h3 {
  margin: 0.25rem 0 0.5rem 0;
}

/* Uniform 270px image box inside the infobox */
.md-typeset .infobox .infobox-image {
  display: block;
  width: 100%;
  height: 270px;               /* target size */
  object-fit: contain;         /* keep aspect ratio, no cropping */
  background: var(--md-code-bg-color);  /* subtle backdrop for transparent PNG/SVG */
  padding: .25rem;
  border-radius: 0.35rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  box-sizing: border-box;
  margin: 0 0 0.6rem 0;        /* keep bottom spacing; centered by default */
}

/* Make the table compact */
.md-typeset .infobox table {
  margin: 0;
}
.md-typeset .infobox table td,
.md-typeset .infobox table th {
  padding: .25rem .4rem;
  vertical-align: top;
  font-size: .95em;
}

/* Stack on small screens and soften image height */
@media (max-width: 960px) {
  .md-typeset .infobox {
    float: none;
    width: auto;
    margin: 0 0 1rem 0;
  }
  .md-typeset .infobox .infobox-image {
    height: 220px;             /* a touch smaller on phones */
  }
}