/* ==========================================================================
   Umbraco Block Grid Layout CSS
   Based on Umbraco 11+ Block Grid default styles
   ========================================================================== */

:root {
    --umb-block-grid--grid-columns: 12;
    --umb-block-grid--column-gap: 0;
    --umb-block-grid--row-gap: 0;
}

.umb-block-grid__layout-container,
.umb-block-grid__block--view > .umb-block-grid__area-container > .umb-block-grid__area {
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), minmax(0, 1fr));
    grid-auto-rows: minmax(auto, auto);
    column-gap: var(--umb-block-grid--column-gap, 20px);
    row-gap: var(--umb-block-grid--row-gap, 20px);
}

.umb-block-grid__layout-item {
    position: relative;
    grid-column-start: var(--umb-block-grid--item-column-span-start, auto);
    grid-column-end: span var(--umb-block-grid--item-column-span, 12);
    grid-row-start: var(--umb-block-grid--item-row-span-start, auto);
    grid-row-end: span var(--umb-block-grid--item-row-span, 1);
}

/* Responsive breakpoints */
@media (max-width: 1199px) {
    .umb-block-grid__layout-item {
        grid-column-end: span var(--umb-block-grid--item-column-span-large, var(--umb-block-grid--item-column-span, 12));
    }
}

@media (max-width: 991px) {
    .umb-block-grid__layout-item {
        grid-column-end: span var(--umb-block-grid--item-column-span-medium, var(--umb-block-grid--item-column-span-large, var(--umb-block-grid--item-column-span, 12)));
    }
}

@media (max-width: 767px) {
    .umb-block-grid__layout-item {
        grid-column-end: span var(--umb-block-grid--item-column-span-small, 12);
    }
}