:root {
  --figure-caption-background-color: var(--color-cyan-light);
  --figure-caption-min-height: 0;
  --figure-caption-size: 1.4rem;
  --figure-height: auto;

  @include use-responsive-sizing(--figure-caption-padding-block --figure-caption-padding-inline, responsive-map(xs 1.5rem, l 2rem));
}

.figure {
  display: block;
}

.figure__figure {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
  block-size: var(--figure-height);
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.figure__lightbox {
  --icon-button-icon-size: 3rem;

  inset-block-end: 0;
  inset-inline-start: 0;
  position: absolute;
  z-index: 2;
}

.figure__caption {
  position: relative;
  text-align: start;
}

.figure__copyright {
  inset-block-start: 0;
  inset-inline-end: 0;
  position: absolute;
  transform: translateY(-100%);
  z-index: 2;
}

.figure__caption {
  min-block-size: var(--figure-caption-min-height);
}

.figure__caption-text {
  background-color: var(--figure-caption-background-color);
  font-size: var(--figure-caption-size);
  line-height: var(--line-height-body);
  padding-block: var(--figure-caption-padding-block);
  padding-inline: var(--figure-caption-padding-inline);
}