/**
 * core/group/callout-columns
 */

*:has(.wp-block-group.is-style-callout-columns) {
	container: callout-columns / inline-size;
}

.wp-block-group.is-style-callout-columns.has-stack-on-mobile {
	--grid-template-columns: 1fr;
	--grid--col-1--column: 1;
	--grid--col-1--row: 1;
	--grid--col-2--column: 1;
	--grid--col-2--row: 2;

	display: grid;
	grid-template-columns: var(--grid-template-columns) !important;
	gap: 0 var(--wp--preset--spacing--60);
}

.wp-block-group.is-style-callout-columns.has-stack-on-mobile > .wp-block-group:first-child  {
	grid-column: var(--grid--col-1--column) !important;
	grid-row: var(--grid--col-1--row) !important;
}

.wp-block-group.is-style-callout-columns.has-stack-on-mobile > *:last-child  {
	grid-column: var(--grid--col-2--column) !important;
	grid-row: var(--grid--col-2--row) !important;
}

@container callout-columns (inline-size <= 768px) {
	.wp-block-group.is-style-callout-columns.has-stack-on-mobile > .wp-block-group:first-child  {
		padding-block-start: 0 !important;
	}
}

@container callout-columns (inline-size > 768px) {
	.wp-block-group.is-style-callout-columns.has-stack-on-mobile {
		--grid-template-columns: repeat(12, 1fr);
		--grid--col-1--column: 1 / span 6;
		--grid--col-1--row: 1;
		--grid--col-2--column: 7 / span 6;
		--grid--col-2--row: 1;
	}
}

@container callout-columns (inline-size > 1024px) {
	.wp-block-group.is-style-callout-columns.has-stack-on-mobile {
		--grid--col-1--column: 1 / span 5;
		--grid--col-2--column: 6 / span 7;
	}
}