//*****************************************************************
// Kayzen-GS
// Made by @esr360
// https://github.com/esr360/Kayzen-GS
//*****************************************************************

.main {
    @include row;
}

.sidebar {
    @include column((
        'width' : (3, 12)
        //'width' : 'quarter'
        //'width' : 100/4
        //'width' : 25%
    ));
}

.content {
    @include column((
        'width' : (9, 12)
    ));
}

//*****************************************************************
// Flow Columns
//*****************************************************************

.portfolio-items {
    @include row('flow');
}

.portfolio-item {
    @include column((
        'type' : 'flow',
        'width': (3, 12),
        'respond-to' : (
            'break-3': (4, 12),
            'break-2': (6, 12),
            'break-1': (12, 12)
        )
    ));
}

//*****************************************************************
// Magic Columns
//*****************************************************************

.product-grid {
    @include row;
}

.product {
    @include column((
        'type' : 'magic'
    ));
}

//*****************************************************************
// Block Columns
//*****************************************************************

.features {
    @include row;
}

.feature {
    @include column((
        'type'  : 'block',
        'width' : (4, 12)
    ));
}

//*****************************************************************
// No-Gutter Columns
//*****************************************************************

.items {
    @include row;
}

.item {
    @include column((
        'type'  : 'no-gutter',
        'width' : (4, 12)
    ));
}