small {
  font-size: var(--font-size-sm);
}

.inline-code {
  padding: 0.01rem 0.4rem;
  border-radius: 1em;
  font-size: var(--font-size-sm);
  background-color: var(--color-border);
  display: inline-block;
  vertical-align: middle;

  @media (prefers-color-scheme: dark) {
    background-color: var(--bg-dark);
  }
}

img {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
  max-width: 100%;
  object-fit: contain;
  height: auto;
}

details {
  display: block;
  padding: 1em;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 2px solid var(--color-brand-complement-dark);

  @media (prefers-color-scheme: dark) {
    border-left-color: var(--color-brand-complement);
  }

  summary {
    cursor: pointer;
    font-size: var(--font-size-sm);
  }
}