.image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.image--portrait {
  @container imagecontainer (orientation: landscape) {
    width: auto;
    height: 100%;
  }
  @container imagecontainer (aspect-ratio: 1 / 1) {
    width: auto;
    height: 100%;
  }
}

.image__main,
.image__placeholder {
  width: 100%;
  height: auto;
}

.image__main:not([data-defer-loading]) {
  display: block;
  position: relative;
  z-index: 2;
  .js & {
    opacity: 0;
    &.is-loaded {
      opacity: 1;
      transition: opacity 200ms ease-out;
    }
  }
}

.image__placeholder {
  display: none;
  .js &:not([data-defer-src]) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
  }
  .js .image:has(.is-loading) & {
    opacity: 1;
  }
  .js .image:has(.is-loaded) & {
    opacity: 0;
    transition: opacity 200ms ease-in;
    transition-delay: 100ms;
  }
}