_image.scss

// Image block styles for figures containing img elements.
.image--half {
  max-width: 100%;
  margin: 1em auto;

  @include min-width(s01) {
    max-width: 75%;
  }

  @include min-width(m01) {
    max-width: 50%;
  }
}

.image,
.image--wide {
  @include bleed-image(1em);
  margin-top: 1em;

  @include min-width(s03) {
    @include bleed-image(2em);
  }

  @include min-width(s04) {
    @include bleed-image(2.5em);
  }
}

.image {
  @include min-width(l01) {
    margin: 1.5em auto;
    width: 100%;

    figcaption {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.image--wide {
  @include min-width(l01) {
    @include bleed-image(4.5em);
    max-width: none;

    figcaption {
      width: 50%;
      margin-left: 50%;
    }
  }

  @include min-width(l03) {
    @include bleed-image(9em);
  }
}

p + .image,
p + .image--wide {
  margin-top: 2em;
}

// Utility for right-aligned images
.right {
  @include min-width(s04) {
    float: right;
    margin: 1em -2.5em 1em 1.25em;
    width: 50%;
  }

  @include min-width(l01) {
    margin: 1.5em -4.5em 1.5em 2em;
  }

  @include min-width(l03) {
    margin-right: -9em;
  }
}

@media (max-width: 60em) and (min-aspect-ratio: 5/3),
(min-width: 60em) and (min-aspect-ratio: 16/9) {
  .image--wide,
  .grid--wide {
    @include bleed-image(4.5em);
  }
}