@layer components {
  .rs-image {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rs-radius-medium);
    background: var(--rs-color-background-neutral-faded);
    color: var(--rs-color-foreground-disabled);
  }

  .rs-image[data-outline]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: inherit;
    pointer-events: none;
  }

  .rs-image > img,
  img.rs-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .rs-image[data-fit="contain"] > img,
  img.rs-image[data-fit="contain"] {
    object-fit: scale-down;
  }
}