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

/* Portrait images in landscape/square containers should fit by height */
.image--portrait {
  @container imagecontainer (orientation: landscape) {
    width: auto;
    height: 100%;
  }
  @container imagecontainer (aspect-ratio: 1 / 1) {
    width: auto;
    height: 100%;
  }
}

.image__main,
.image__placeholder {
  display: block;
  max-width: 100%;
  height: auto;
}

.image__main {
  position: relative;
  z-index: 2;
  .js & {
    opacity: 0;
    &.is-loaded {
      opacity: 1;
      transition: opacity 200ms ease-out;
    }
  }
}

.image__placeholder {
  display: none;
  .js & {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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;
  }
}