:host,
:root {
	--umb-block-grid--column-gap:32px;
	--umb-block-grid--areas-column-gap:32px
}
@media(max-width:400px) {
	:host,
	:root {
		--umb-block-grid--column-gap:0;
		--umb-block-grid--areas-column-gap:0
	}
}
.umb-block-grid__layout-container {
	column-gap:var(--umb-block-grid--column-gap,0);
	display:grid;
	grid-auto-flow:row;
	grid-template-columns:repeat(var(--umb-block-grid--grid-columns,1),minmax(0,1fr));
	position:relative;
	row-gap:var(--umb-block-grid--row-gap,0)
}
.umb-block-grid__layout-item {
	grid-column-end:span min(var(--umb-block-grid--item-column-span,1)*3,var(--umb-block-grid--grid-columns));
	grid-row:span var(--umb-block-grid--item-row-span,1);
	position:relative
}
.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
	column-gap:var(--umb-block-grid--areas-column-gap,0);
	display:grid;
	grid-auto-flow:row;
	grid-template-columns:repeat(var(--umb-block-grid--area-grid-columns,var(--umb-block-grid--grid-columns,1)),minmax(0,1fr));
	position:relative;
	row-gap:var(--umb-block-grid--areas-row-gap,0)
}
.umb-block-grid__area {
	display:flex;
	flex-direction:column;
	grid-column-end:span min(var(--umb-block-grid--area-column-span,1)*3,var(--umb-block-grid--area-grid-columns));
	grid-row:span var(--umb-block-grid--area-row-span,1);
	height:100%;
	position:relative
}
@media(min-width:1024px) {
	.umb-block-grid__layout-item {
		grid-column-end:span min(var(--umb-block-grid--item-column-span,1),var(--umb-block-grid--grid-columns))
	}
	.umb-block-grid__area {
		grid-column-end:span min(var(--umb-block-grid--area-column-span,1),var(--umb-block-grid--area-grid-columns))
	}
}