.lazyload-image {
  // content-box because some images use padding to add space above/below, which
  // conflicts with the max-height set on .lazyload-image (see image module).
  box-sizing: content-box;
  // display: block because the element is a span, in order to remain valid HTML
  // when inserted as phrasing content, e.g. inside a p.
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: auto;

  img {
    display: block;
  }
}

.lazyload-image__placeholder {
  display: block; // see comment above regarding spans
  width: 100%;
  height: 0;

  .lazyloaded + & {
    // scss-lint:disable ImportantRule
    display: none !important;
    // scss-lint:enable ImportantRule
  }
}