: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 for public variables 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-row--col-gap: Gap between columns. Defaults to `--space-2xs-xs`.
  */
  /**
   * @prop --ojp-row--row-gap: Vertical gap between stacking columns in a row. Defaults to `--space-2xs-xs`.
  */
  /**
  * @prop --ojp-row--margin-inline: Inline margin between rows. Defaults to `--space-xs-s`.
   */
  /**
  * @prop --ojp-row--gutter: Minimum gutter width. Defaults to `--space-s-3xl`.
  */
  /**
  * @prop --ojp-row--align-items: Align Items. Defaults to `stretch`.
  */
  /**
  * @prop --ojp-row--justify-items: Justify Items. Defaults to `stretch`.
  */
  /**
   * @prop ojp-row--max-wrapper-width: Max Wrapper Width (not including gutters). Defaults to `1440px`.
  */
  /**
     * Private Variable - set by JS according to props
     * --ojp-row--mcols: Number of columns in the row
     * for mobile screens. Defaults to 12.
    */
  /**
   * Private Variable - set by JS according to props
   * --ojp-row--tcols: Number of columns in the row
   * for tablet screens. Defaults to 12.
  */
  /**
   * Private Variable - set by JS according to props
   * --ojp-row--dcols: Number of columns in the row
   * for desktop screens. Defaults to 12.
  */
  /**
   * Private Variable - set by JS according to props
   * --ojp-row--cols: Number of columns in the row
   * for tablet screens. Defaults to `--ojp-row--mcols`. Only used internally.
  */
  display: block;
  padding-left: var(--ojp-row--gutter);
  padding-right: var(--ojp-row--gutter);
}
:host .ojp-row__container {
  align-items: var(--ojp-row--align-items);
  column-gap: var(--ojp-row--col-gap);
  display: grid;
  grid-template-columns: repeat(var(--ojp-row--cols), 1fr);
  height: 100%;
  justify-items: var(--ojp-row--justify-items);
  margin: var(--ojp-row--margin-inline) auto;
  max-width: var(--ojp-row--max-wrapper-width);
  row-gap: var(--ojp-row--row-gap);
  width: 100%;
}

:host(:first-child) .ojp-row__container,
:host(:only-child) .ojp-row__container {
  margin-top: 0;
}

:host(:last-child) .ojp-row__container,
:host(:only-child) .ojp-row__container {
  margin-bottom: 0;
}