[data-fui-comp="ui-image"] {
  display: inline-block;
  position: relative;
  line-height: 0;
  /* contain ensures the aspect-ratio rules below don't bleed out. */
  contain: layout style;
}
[data-fui-comp="ui-image"] .ui-image__img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  background: var(--color-surface-soft, #F4F4F5);
}
[data-fui-comp="ui-image"].ui-image--fit-contain .ui-image__img { object-fit: contain; }
[data-fui-comp="ui-image"].ui-image--fit-fill    .ui-image__img { object-fit: fill;    }
[data-fui-comp="ui-image"].ui-image--rounded     .ui-image__img,
[data-fui-comp="ui-image"].ui-image--rounded     picture {
  border-radius: var(--radii-md, 8px);
}
[data-fui-comp="ui-image"].ui-image--aspect-1-1  .ui-image__img { aspect-ratio: 1 / 1;  inline-size: 100%; block-size: auto; }
[data-fui-comp="ui-image"].ui-image--aspect-4-3  .ui-image__img { aspect-ratio: 4 / 3;  inline-size: 100%; block-size: auto; }
[data-fui-comp="ui-image"].ui-image--aspect-16-9 .ui-image__img { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; }
[data-fui-comp="ui-image"].ui-image--aspect-21-9 .ui-image__img { aspect-ratio: 21 / 9; inline-size: 100%; block-size: auto; }
[data-fui-comp="ui-image"].ui-image--aspect-3-4  .ui-image__img { aspect-ratio: 3 / 4;  inline-size: 100%; block-size: auto; }

/* Decorative class — allows alt="" without alt-text warnings. */
[data-fui-comp="ui-image"].ui-image--decorative .ui-image__img {
  /* visual same as default; the marker exists for the linter / a11y
     audit to know empty alt is intentional. */
}