.kirco-brand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kirco-brand-logo-gap, 12px);
}

/* Doubled-up class (not just .kirco-brand-logos__item) is required for
 * specificity: Elementor's own "img" reset rules (e.g. ".elementor img")
 * tie with a single-class selector on class count and then win the
 * specificity tiebreak via their extra type selector, silently discarding
 * a plain single-class rule. Applies to both the badge box and the img
 * inside it. */
.kirco-brand-logos .kirco-brand-logos__item {
  /* Fixed height only (no fixed width) is what makes every logo render at
   * the same height while keeping its own natural aspect ratio - the item
   * box sizes to its content (height + padding), rather than to a fixed
   * width box that the img then letterboxed inside. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: var(--kirco-brand-logo-box-height, 48px);
  padding: var(--kirco-brand-logo-box-padding, 8px);
  background-color: var(--kirco-brand-logo-box-bg, #fff);
  border-radius: var(--kirco-brand-logo-box-radius, 4px);
  box-sizing: border-box;
  flex-shrink: 0;
}

.kirco-brand-logos .kirco-brand-logos__item-img {
  /* A definite height (not max-height, not auto) is required here: this
   * widget can land inside deeply-nested width:auto/height:auto flex
   * wrappers (e.g. an absolutely-positioned overlay container for a logo
   * badge on top of a loop card's image), and without a definite
   * cross-axis value the auto-sizing chain can't resolve - Chromium
   * collapses the image to 0x0 instead of falling back to its intrinsic
   * size. 100% height (a definite size) sidesteps that entirely; width is
   * left to auto so the image keeps its own aspect ratio instead of
   * stretching to fill a fixed-width box. */
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}