[data-fui-comp="ui-aspect-ratio"] {
  position: relative;
  width: 100%;
}
[data-fui-comp="ui-aspect-ratio"] > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
[data-fui-comp="ui-aspect-ratio"].ui-ar--1-1  { aspect-ratio: 1 / 1; }
[data-fui-comp="ui-aspect-ratio"].ui-ar--4-3  { aspect-ratio: 4 / 3; }
[data-fui-comp="ui-aspect-ratio"].ui-ar--16-9 { aspect-ratio: 16 / 9; }
[data-fui-comp="ui-aspect-ratio"].ui-ar--21-9 { aspect-ratio: 21 / 9; }
[data-fui-comp="ui-aspect-ratio"].ui-ar--3-4  { aspect-ratio: 3 / 4; }
[data-fui-comp="ui-aspect-ratio"].ui-ar--3-2  { aspect-ratio: 3 / 2; }
[data-fui-comp="ui-aspect-ratio"].ui-ar--2-3  { aspect-ratio: 2 / 3; }
/* auto: no aspect-ratio, child sizes naturally */
[data-fui-comp="ui-aspect-ratio"].ui-ar--auto > * {
  position: static;
  width: auto;
  height: auto;
}