img {
   border-radius: var(--image-radius, var(--image--border-radius));
}

[data-component="image"], .img-component {
  width: 100%;
  position: relative;
  
  &[data-variant="background"] {
    *:has(> &) {
      position: relative;
      isolation: isolate;
    }
    z-index: -1;
    aspect-ratio: auto;
    height: 100%;
    position: absolute;
    inset: 0%;
    & img{border-radius: 0px;}
  }

  [data-image="overlay"], .img-component_bg-overlay {
    display: none;
    padding: 0px;
  }

  &[data-variant="background"] [data-image="overlay"], &[data-variant="background"] .img-component_bg-overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
    background-color: oklch(from var(--_site-theme---image--overlay-background) l c h / var(--bg-overlay-strength, 0.7));
  }
}

[data-image="fit"], .u-img-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;

  &[data-variant="top-left"] {
    object-position: 0% 0%;
  }

  &[data-variant="top-center"] {
    object-position: 50% 0%;
  }

  &[data-variant="top-right"] {
    object-position: 100% 0%;
  }

  &[data-variant="center-left"] {
    object-position: 0% 50%;
  }

  &[data-variant="center-right"] {
    object-position: 100% 50%;
  }

  &[data-variant="bottom-left"] {
    object-position: 0% 100%;
  }

  &[data-variant="bottom-center"] {
    object-position: 50% 100%;
  }

  &[data-variant="bottom-right"] {
    object-position: 100% 100%;
  }
  &[data-variant="contain"] {
    object-fit: contain;
  }
}