.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-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);
}


/* Target specifically the 2-column block grid */
[data-content-element-type-alias="twoColumnLayoutBlockGridComponent"] > div > .umb-block-grid__area-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    justify-content: center; /* centers inside the 12-col grid */
    gap: 2rem; /* space between the two blocks */
}

/* Force each column to take 4 of 12 (instead of 6) */
[data-content-element-type-alias="twoColumnLayoutBlockGridComponent"]
.umb-block-grid__area {
    --umb-block-grid--area-column-span: 4 !important;
}

    /* Push the first column to start in column 3 (so 2 empty cols left, 2 right) */
    [data-content-element-type-alias="twoColumnLayoutBlockGridComponent"]
    .umb-block-grid__area:first-child {
        grid-column-start: 3;
    }

/* 📱 Mobile: stack them full width */
@media (max-width: 768px) {
    [data-content-element-type-alias="twoColumnLayoutBlockGridComponent"]
    .umb-block-grid__area {
        --umb-block-grid--area-column-span: 12 !important;
        grid-column-start: auto !important; /* reset the custom offset */
    }

    [data-content-element-type-alias="twoColumnLayoutBlockGridComponent"] > div > .umb-block-grid__area-container {
        gap: 0;
    }
}

@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));
    }
}