/**
 * JS Responsive Image.
 *
 * A <picture> with a source per breakpoint. Deliberately almost nothing: the
 * point of the widget is which file loads, not how it is presented, and the
 * places that use it bring their own sizing — the child theme's .js-photo-plate
 * sets the height and the crop for the story section, for instance.
 *
 * No outer padding is baked in — the Elementor container owns the gutters.
 */

/* Fill the container even inside a flex parent that would shrink to content. */
.elementor-widget-js_responsive_image {
	width: 100%;
}

.js-responsive-image {
	display: block;
	width: 100%;
}

.js-responsive-image__link {
	display: block;
	width: 100%;
	line-height: 0;
}

.js-responsive-image__img {
	display: block;
	width: 100%;
	/* auto, and every <source> carries its own width/height, so the box takes
	   the shape of the file that actually won rather than the desktop one's. */
	height: auto;
	/* The Corner Radius control writes border-radius straight onto this image,
	   at a specificity nothing here can reach — so this is only what the image
	   looks like before Elementor has written a value for it, which is the
	   state a page sits in until it is next saved. Matches the control's
	   default so the two never disagree. */
	border-radius: var(--js-responsive-image-radius, 24px);
}