.figure {
  position: relative;
  border: var(--size-2) solid var(--color-surface-inverse);
  clip-path: polygon(0 var(--size-12), var(--size-12) 0, 100% 0, 100% 100%, 0 100%);
}

.caption {
  padding: var(--spacing-snug);

  font-family: var(--font-mono);
  font-size: var(--typo-size-sm);
  line-height: var(--typo-leading-relaxed);
  color: var(--color-text-inverse);

  background: var(--color-surface-inverse);
}

.credit {
  display: block;

  margin-top: var(--spacing-tight);

  font-family: var(--font-mono);
  font-size: var(--typo-size-xs);
  font-style: normal;
  color: var(--color-text-inverse);
  text-align: right;

}