/**
 * media-image.css
 *
 * Drupal's responsive_image theme generates a <picture> element which is
 * inline by default. These rules ensure it fills the figure wrapper correctly
 * when aspect ratio constraints or object-cover are in play.
 */

.inclind-media-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * Object-fit utilities (driven by the `object_fit` prop). Scoped to the
 * component so they win over Tailwind and are always present without a build
 * step (object-fill / object-none / object-scale-down are not in the Tailwind
 * output otherwise). Effective when the image box is constrained (aspect ratio).
 */
.inclind-media-image .object-cover      { object-fit: cover; }
.inclind-media-image .object-contain    { object-fit: contain; }
.inclind-media-image .object-fill       { object-fit: fill; }
.inclind-media-image .object-none       { object-fit: none; }
.inclind-media-image .object-scale-down { object-fit: scale-down; }