.umb-block-grid__layout-container {
	column-gap: var(--umb-block-grid--column-gap,0);
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: minmax(50px,min-content);
	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(calc(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-auto-rows: minmax(50px,min-content);
	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(calc(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))
	}
}