/*
 * Normalising frame for card images. See inc/woocommerce/card-image-frame.php.
 *
 * Real height rather than a transform: the layout width then matches the visual
 * size, so the browser picks a big enough srcset candidate. Overflow is clipped
 * by the box, which only removes empty margin because subjects are centred.
 */
.nr-card-frame {
	aspect-ratio: var(--nr-card-img-ar, 1);
	container-type: inline-size;
	display: block;
	flex: 0 0 auto;
	height: calc(100% * var(--nr-card-img-fit, 1));
	max-width: none;
	position: relative;
}

/* Box the renderer puts the frame in. It must have a definite height of its
   own - the frame's height is relative to it. */
.nr-card-frame-box {
	align-items: center;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
}