/*  
---------------------------------------------------
Block Grid Layout
---------------------------------------------------  
*/

.block-grid {
    width: 100%;
}

.block-grid__row {
    width: 100%;
}

.block-grid__areas {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--area-grid-columns, 12), 1fr);
    gap: 24px;
}

.block-grid__area {
    grid-column: span var(--area-column-span, 12);
    display: flex;
    flex-direction: column;
}

    .block-grid__area > .block-grid__content {
        width: 100%;
    }