.frmwrk-document-grid__item .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* Replicate the wp-container-* inline layout CSS that WordPress generates for
   frmwrk/modal blocks but that our server-rendered modals don't get. */

/* Constrained layout: center inner content to content-size. */
.frmwrk-document-modal .fw-modal__inner > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.frmwrk-document-modal .fw-modal__content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.frmwrk-document-modal .fw-modal__inner > .alignwide,
.frmwrk-document-modal .fw-modal__content > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

.frmwrk-document-modal .fw-modal__inner > .alignfull,
.frmwrk-document-modal .fw-modal__content > .alignfull {
	max-width: none;
}

/* Flex gap on the controls row (title + close button columns). */
.frmwrk-document-modal .fw-modal__controls {
	gap: var(--wp--custom--spacing--block-gap, 24px);
}

/* .is-style-fw-section-navigation is a shared theme block style built for a
   two-per-row tile grid; it sets each direct child group to ~50% width at
   desktop widths (see style.css). The technical-list category groups here
   are a single-column list of headings + links, so they need to stay full
   width instead of inheriting that split. */
.frmwrk-document-grid--technical.is-style-fw-section-navigation > .wp-block-group {
	flex: 1 1 100%;
}

.frmwrk-color-grid-placeholder {
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px dashed rgba( 128, 128, 128, 0.5 );
	padding: 1.5rem;
	text-align: center;
	border-radius: 8px;
}

.frmwrk-color-grid-placeholder strong {
	display: block;
	font-size: 1.1em;
	margin-bottom: 0.25rem;
}

.frmwrk-color-grid-placeholder p {
	margin: 0;
	opacity: 0.75;
	font-size: 0.9em;
}