.layout-row {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    flex-wrap: wrap;

    &.nowrap {
        flex-wrap: nowrap;
    }
}

// Стилизация дочерних элементов (колонок)
.layout-row > * {
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;

    // Основная ширина колонки
    flex-basis: calc(100% / var(--columns) * var(--col-span, var(--columns)));
    max-width: calc(100% / var(--columns) * var(--col-span, var(--columns)));

    // Отступ слева (offset)
    margin-left: calc(100% / var(--columns) * var(--col-offset, 0));
}

// Убираем margin-left для первого элемента в строке
.layout-row > *:first-child {
    margin-left: 0;
}

// Для элементов после переноса строки
.layout-row > .layout-col--first-in-row {
    margin-left: 0;
}