/**
 * @file
 * Container Query Images CSS.
 *
 * Provides container query support via CSS container-type property.
 * The JavaScript handles image selection based on container width.
 */

/* Container query wrapper - enables CSS container queries */
.cq-image-wrapper {
  display: block;
  width: 100%;
  container-type: inline-size;
  container-name: image-container;
}

/* Responsive image inside wrapper */
.cq-image-wrapper picture,
.cq-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* Alternative class from the module's preprocess */
.cq-responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
  .cq-image-wrapper {
    width: 100%;
  }
}