figure {

font-size: 0; // fix whitespace causing percentage issues
margin: 2rem 0;
position: relative;
text-align: center;

article & p {
  max-width: 100%; // Fix Markdown wrapping images in `<p>` and setting max-width
}

* {
  margin: 0;
  max-width: 100%;
}

img,
video {
  display: inline;
  transition: transform 250ms ease;
  vertical-align: middle;

  &:active,
  &:focus {
    outline: none;
    position: relative; // Fixes z-index issues on transform
    z-index: 1;
  }
}

.highlighter-rouge {
  font-size: 1rem;
  margin-bottom: 0;
}

&.embed {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 56.25%; // 16:9
  position: relative;
  width: var(--content-width);

  iframe {
    border: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

figcaption {
  font-family: var(--ui-font);
  font-size: 0.8rem;
  margin: 1em auto 4em;
  opacity: 0.67;
  text-align: center;
}

&.third {
  img,
  video {
    cursor: zoom-in;
    margin: 1%;
    max-width: 31.33%;

    &:focus {
      cursor: zoom-out;
    }

    &:nth-child(3n+1):active,
    &:nth-child(3n+1):focus {
      transform: translateX(100%) scale(3);
    }

    &:nth-child(3n+2):active,
    &:nth-child(3n+2):focus {
      transform: translateX(0) scale(3);
    }

    &:nth-child(3n+3):active,
    &:nth-child(3n+3):focus {
      transform: translateX(-100%) scale(3);
    }
  }
}

&.half {
  img,
  video {
    cursor: zoom-in;
    margin: 1%;
    max-width: 48%;

    &:focus {
      cursor: zoom-out;
    }

    &:nth-child(odd):active,
    &:nth-child(odd):focus {
      transform: translateX(50%) scale(2);
    }

    &:nth-child(even):active,
    &:nth-child(even):focus {
      transform: translateX(-50%) scale(2);
    }
  }
}

&.full-bleed {
  img,
  video {
    left: 50%;
    max-width: 100vw;
    position: relative;
    transform: translateX(-50%);
    width: 100vw;
  }
}

&.constrained {
  img,
  video {
    width: var(--content-width);
  }
}

&.circle {
  img,
  video {
    border-radius: 50%;
  }
}

&.card {
  img,
  video {
    background-color: var(--silver-100);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.05),
      0 3px 3px rgba(0, 0, 0, 0.22);

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

}