/*
 * Banner zones (spec §13.2).
 *
 * A running banner reserves its footprint via CSS custom properties set
 * inline by RSDF_Banners::render_zone() — this is what stops it causing
 * layout shift when banners rotate on a later page load. An empty zone (no
 * banner sold for that position yet) renders with the .rsdf-banner--empty
 * modifier and no reserved space at all — see the render_zone() docblock
 * for why the literal "always reserve the footprint" reading was reverted.
 * Mobile dimensions apply under the same breakpoint the rest of the site
 * uses (spec §5.3).
 */

.rsdf-banner {
	width: 100%;
	max-width: var(--rsdf-banner-w);
	height: var(--rsdf-banner-h);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.rsdf-banner--empty {
	max-width: 0;
	height: 0;
}

.rsdf-banner__link {
	display: block;
	width: 100%;
	height: 100%;
}

.rsdf-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 639px) {
	.rsdf-banner {
		max-width: var(--rsdf-banner-w-m);
		height: var(--rsdf-banner-h-m);
	}
}