$hero_aspectratio-H: 12/9;
$hero_aspectratio-V: 9/12;

.wp-block-plaudit-hero {
	.__inner {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: visible;
		container-type: size;
	}
	figure {
		position: absolute;
		inset: 0;
		height: auto;
		margin: 0;

		img {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.no-js & {
		figure > img {
			display: none;
		}
		noscript img {
			display: none;
		}
		@container (aspect-ratio > $hero_aspectratio-H) {
			noscript img.landscape { display: block; }
		}
		@container (aspect-ratio <= $hero_aspectratio-H) and (aspect-ratio >= $hero_aspectratio-V) {
			noscript img.square    { display: block; }
		}
		@container (aspect-ratio < $hero_aspectratio-V) {
			noscript img.portrait { display: block; }
		}
	}

	@media (width <= 800px) {
		max-height: calc(100vh - 150px);
	}
}

body.wp-admin .components-focal-point-picker-wrapper {
	aspect-ratio: 5/3;
}

body.home .acf-post-heading > .wp-block-plaudit-hero {
	inset-block-start: -116px;
}
.acf-post-heading > .wp-block-plaudit-hero {
	position: absolute;
	inset: 0;
	min-height: 100%;
	min-width: 100%;
	overflow: hidden;

}
.acf-post-heading:has(.wp-block-plaudit-hero) .wp-block-cover:not(:has(.wp-block-cover__image-background)) {
	background: none;
}