$caption-font-size: .9rem;

.flexible-article-image-full {
  .thumbnail {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .caption {
    font-size: $caption-font-size;
  }
}

.flexible-article-image-left {
  float: left;
  margin: 1rem 1.5rem 0 0;
  max-width: rem-calc(200);

  .caption {
    font-size: $caption-font-size;
  }

  @include breakpoint (small only) {
    float: none;
    max-width: 100%;
    margin: 0;

    .thumbnail {
      width:100%;

      img {
        width:100%;
      }
    }
  }
}

.flexible-article-image-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: rem-calc(200);

  .caption {
    font-size: $caption-font-size;
  }

  @include breakpoint (small only) {
    float: none;
    max-width: 100%;
    margin: 0;

    .thumbnail {
      width:100%;

      img {
        width:100%;
      }
    }
  }
}
