.wp-block-wrd-page-grid__grid {
	--wp-block-wrd-page-grid__row-height: 10rem;

	display: grid;
	gap: 1.5rem;
	padding: 1.5rem;
	grid-auto-rows: var(--wp-block-wrd-page-grid__row-height);
}

@media (width >= 48rem /* 768px */) {
	.wp-block-wrd-page-grid__grid {
		--wp-block-wrd-page-grid__row-height: 12rem;
		grid-template-columns: 1fr 1fr;
	}

	.wp-block-wrd-page-grid__grid:has(> :last-child:nth-child(odd))::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 50%;
		height: calc(var(--wp-block-wrd-page-grid__row-height) + 1.5rem);
		background: var(--color-surface-0);
	}
}

@media (width >= 64rem /* 1024px */) {
	.wp-block-wrd-page-grid__grid {
		--wp-block-wrd-page-grid__row-height: 16rem;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.wp-block-wrd-page-grid__grid:has(> :last-child:nth-child(odd))::after {
		content: none;
	}

	.wp-block-wrd-page-grid__grid:has(
			> :last-child:is(:nth-child(3n + 1), :nth-child(3n + 2))
		)::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 66%;
		height: calc(var(--wp-block-wrd-page-grid__row-height) + 1.5rem);
		background: var(--color-surface-0);
	}
}

.wp-block-wrd-page-grid__grid > * {
	box-shadow: 0 0 0 1.5rem var(--color-surface-0);
}