img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
  z-index: 1;
  opacity: 1;
  transition: all 0.3s ease;

  /* If lazyload implemented,
  basic fade transition. */

  &.lazyload {
    opacity: 0;
  }

  &.lazyloaded {
    opacity: 1;
  }
}

.figure {
  width: 100%;
  z-index: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
  position: relative;

  &-rounded {
    .border-radius(null, 0.3rem);
  }

  img,
  .img {
    width: 100%;
  }

  figcaption,
  .figcaption {
    z-index: 3;
    position: relative;

    color: lighten(@colors[@light][text], 10%);
    & when (@color-scheme[dark] = true) {
      @media (prefers-color-scheme: dark) {
        color: darken(@colors[@dark][text], 10%);
      }
    }

    &::before {
      content: "â€” ";
    }
  }


  &-fixed {
    .flex-center();
    overflow: hidden;
    position: relative;

    &::before {
      content: '';
      display: block;
      padding-top: 530px;
    }

    &-image {
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }

    figcaption,
    &.figcaption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;
      padding: 1em;
      color: @colors[@light][background];
      background: linear-gradient(
        0deg,
        fade(@colors[@light][text], 60%) 0%,
        fade(@colors[@light][text], 0%) 100%
      );
    }
  }
}
