/**
 * Component: picture
 * -------------------------------------------------------------------------- */

:root:not(.dark) .dark-only,
:root:is(.dark) .light-only,
:root:not(.dark) img[src$='#dark'],
:root:is(.dark) img[src$='#light'] {
  display: none;
}

/* image subtitle */
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  img {
    border-radius: 0.5rem;
  }

  figcaption {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--vp-c-text-3);
    font-size: 0.875rem;
    font-weight: 400;

    a {
      color: var(--vp-c-text-3) !important;
    }
  }
}