:host {
  /**
    * Component css variables are commented but NOT DEFINED here. They are defined in
    * the component's global scss file (e.g. src/global/components/_ojp-image.scss)
    * so that they can be used by other components and use globally set breakpoints.
    *
    **** NOTE: The @prop comments are necessary here because they will be picked up
    **** by Stencil's docs auto-generator and output to the component's docs at
    **** docs/components/<component-name>/readme.md
    ****
    **** Any comment changes here should be duplicated into the component's global scss file
    **** (e.g. src/global/components/_ojp-image.scss)
   */
  /**
   * @prop --ojp-image--max-width: The max-width property of the img. Defaults to `max-content`;
   */
  /**
   * @prop --ojp-image--object-fit: The object-fit property of the img. Defaults to `cover`;
   */
  /**
   * @prop --ojp-image--width: The width property of the img. Defaults to `100%`;
   */
  /**
   * @prop --ojp-image--display: The display property of the img. Defaults to `block`;
   */
  /*
  This may not always be the case, but in this component
  we want to inherit all of the :host's properties
  so that a consumer of the library can style the
  component by using ojp-image {} on their stylesheet.
   */
}
:host > img {
  all: inherit;
}
:host img {
  display: var(--ojp-image--display, block);
  height: var(--ojp-image--height, auto);
  max-width: var(--ojp-image--max-width, 100%);
  object-fit: var(--ojp-image--object-fit, cover);
  width: var(--ojp-image--width, auto);
}