﻿.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);
	column-gap: var(--umb-block-grid--column-gap, 0);
	row-gap: var(--umb-block-grid--row-gap, 0);
}

.umb-block-grid__layout-item {
	position: relative;
	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);
	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;
	grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--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 var(--umb-block-grid--area-column-span, 1);
	}
}

.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
	max-width: var(--my-container-max-width);
	padding: var(--my-container-padding);
	margin-left: auto;
	margin-right: auto;
	--umb-block-grid--areas-column-gap: 21px;
	--umb-block-grid--areas-row-gap: 40px;
}

.umb-block-grid__area {
	justify-content: center;
}

.umb-block-grid__layout-item[data-content-element-type-alias="oneColumnSectionBlock"] .umb-block-grid__layout-container {
	--umb-block-grid--column-gap: 21px;
	--umb-block-grid--row-gap: 40px;
}

.umb-block-grid {
	container-type: inline-size;
	--my-container-max-width: calc((100% / 12) * 10) /*1120px*/;
	--my-container-padding: 0 /*40px*/;
}

/*.root-block-element { overflow: hidden; }*/

@container (min-width: 720px) {
	.umb-block-grid__layout-container {
		--my-container-padding: 0 /*40px*/;
	}
}

.umb-block-grid__block--inline-create-button.--above.--at-root {
	left: unset !important; 
	width: 100% !important;
}