/**
 * Native <picture> output from partials/media/media-image.php
 * (CHURCHARMY2021_NATIVE_IMAGES). Replaces the JS medialoader's
 * background-image with a real <img> using object-fit.
 */

/* Let the <img> lay out as if it were a direct child of the wrapper. */
.c-media-image__picture {
  display: contents;
}

.c-media-image__img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Background mode: fill the aspect-ratio / fill box like background-size did. */
.c-media-image__img--cover,
.c-media-image__img--contain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.c-media-image__img--contain {
  object-fit: contain;
}

/* Anchors: mirror the u-bg-anchor-* background-position rules. */
.u-bg-anchor-left-top      .c-media-image__img { object-position: 0 0; }
.u-bg-anchor-left-center   .c-media-image__img { object-position: 0 50%; }
.u-bg-anchor-left-bottom   .c-media-image__img { object-position: 0 100%; }
.u-bg-anchor-right-top     .c-media-image__img { object-position: 100% 0; }
.u-bg-anchor-right-center  .c-media-image__img { object-position: 100% 50%; }
.u-bg-anchor-right-bottom  .c-media-image__img { object-position: 100% 100%; }
.u-bg-anchor-center-top    .c-media-image__img { object-position: 50% 0; }
.u-bg-anchor-center-center .c-media-image__img { object-position: 50% 50%; }
.u-bg-anchor-center-bottom .c-media-image__img { object-position: 50% 100%; }