
.umb-block-grid__layout-container {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
	grid-auto-flow: row;
	grid-auto-rows: minmax(50px, min-content);
	-moz-column-gap: var(--umb-block-grid--column-gap, 0);
	column-gap: var(--umb-block-grid--column-gap, 0);
	row-gap: var(--umb-block-grid--row-gap, 0);
}

	.umb-block-grid__layout-container img {
	/*	-webkit-box-shadow: inset -1px 3px 8px 5px #ccc, 2px 5px 16px 0px #ccc, -1px 3px 26px 6px rgba(0,0,0,0);
		box-shadow: inset -1px 3px 8px 5px #666, 2px 5px 16px 0px #666, -1px 3px 26px 6px rgba(0,0,0,0);*/
		border-radius: 7px;
}


.umb-block-grid__layout-item {
	position: relative;
	/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
	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);
}


.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
	grid-auto-flow: row;
	grid-auto-rows: minmax(50px, min-content);
	-moz-column-gap: var(--umb-block-grid--areas-column-gap, 0);
	column-gap: var(--umb-block-grid--areas-column-gap, 0);
	row-gap: var(--umb-block-grid--areas-row-gap, 0);
}

.umb-block-grid__area {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
	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);
}

@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));
		padding: 0px 25px 0 0;
	}

		.umb-block-grid__area:last-child {
			grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
			padding: 0px 0px 0 0;
		}
}
