@keyframes load-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

[data-load-image] {
  position: relative;
  background-position: center;
  background-size: cover;
  background-color: $text-color;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
  transition: background-image .5s ease-in-out;

  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: solid 2px transparent;
    border-top-color: $background-color;
    border-left-color: $background-color;
    border-radius: 10px;
    animation: load-spinner 400ms linear infinite;
    transition: opacity .2s;
  }

  &.image-loaded:before {
    opacity: 0;
  }
}

img {
  max-width: 100%;
  margin: 0 auto;
}

figure {
  position: relative;
  margin-bottom: 30px;
  clear: both;
  outline: 0;
  width: 100%;

  img {
    @extend .center-block;
  }

  figcaption {
    position: absolute;
    left: -170px;
    width: 150px;
    top: 0;
    color: $muted-text-color;
    font-style: italic;
    font-size: 12px;
    line-height: 1.3;
    color: #666665;
    outline: 0;
    text-align: right;

    &:before {
      width: 25%;
      margin-left: 75%;
      border: 1px solid $line-breaks-color;
      display: block;
      content: "";
      margin-bottom: 10px;

      @include breakpoint(medium) {
        display: none;
      }
    }

    @include breakpoint(medium) {
      position: relative;
      width: 100%;
      text-align: center;
      left: 0;
      margin-top: 10px;
    }
  }
}