.image {
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  flex-grow: 1;
  line-height: 0;
  max-block-size: var(--image-max-height, none);
  max-inline-size: var(--image-max-width, none);
  position: relative;
}

.image--cover {
  overflow: hidden;
}

.image__img {
  block-size: auto;
  display: block;
  font-size: 1.4rem;
  inline-size: 100%;
  position: relative;
  transition-duration: var(--duration-long);
  transition-property: opacity;
  z-index: 2;

  .js & {
    opacity: 0;
  }

  .js .image--loaded & {
    opacity: 1;
  }

  .image--cover & {
    block-size: 100%;
    inline-size: 100%;
    inset: 0;
    object-fit: cover;
    position: absolute;
    scale: var(--image-cover-zoom, 1);
    transition-duration: var(--image-cover-zoom-duration, var(--duration-fast));
    transition-property: scale;
  }
}