/*
	Layout (Inline/Wide/Full) controls the SECTION's own width, same
	mechanism as Hero's own Layout field. Inline and Wide aren't a
	breakpoint switch — each is just a max-width (the same one .container
	uses, or a bigger one), so on a narrower viewport either naturally
	shrinks to fit exactly the way .container already does, with no
	separate responsive logic. Full has nothing to add here: full-bleed is
	this section's natural default width (no class needed at all), same
	reasoning as the Video block.
*/
.map-block--inline {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.map-block--wide {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--space-11));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/*
	--map-aspect-ratio is set inline per instance (map.php), from the
	Aspect Ratio select field — same reasoning as Video's own
	--video-aspect-ratio.

	position: absolute + inset: 0 on the iframe, not just aspect-ratio on
	its own — iframes don't reliably respect aspect-ratio/object-fit sizing
	the way replaced elements like <video>/<img> do, same pattern as
	.video-block__media-el and .banner__media.
*/
.map-block__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--map-aspect-ratio, 16 / 9);
}

.map-block__media-el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}