_sass/taiga/_layout.scss

@use "grid";
@use "mixins";
@use "settings";

// =========== Layout

.l-full {
    @include mixins.breakpoint(settings.$breakpoint-30) { @include grid.grid(48, 1); }

    & {
        width: 100%;
        float: none;
    }
}

.l-two-third {

    @include mixins.breakpoint(settings.$breakpoint-30) { @include grid.grid(32, 1); }
}

.l-half {

    @include mixins.breakpoint(settings.$breakpoint-30) { @include grid.grid(24, 1); }
}

.l-one-quarter {
    @include mixins.breakpoint(settings.$breakpoint-30) { @include grid.grid(12, 1); }
}

.l-one-eigth {
    @include mixins.breakpoint(settings.$breakpoint-30) { @include grid.grid(6, 1); }
}

.l-one-sixth {
    @include mixins.breakpoint(settings.$breakpoint-30) { @include grid.grid(8, 1); }
}

.l-one-third {

    @include mixins.breakpoint(settings.$breakpoint-30) { @include grid.grid(16, 1);  }
}

.l-grid {
    @include grid.grid-container;

    li { @include grid.grid(16, 1); }
}

.l-first { clear: left; }


.l-container {
    margin: auto;
    max-width: settings.$max-width;
    padding: settings.$spacing ;
    @include grid.grid-container;

    @include mixins.breakpoint(settings.$breakpoint-30) { padding: settings.$spacing (settings.$spacing * 5); }
}

.l-button-table {
    @include mixins.breakpoint(settings.$breakpoint-30) {
        display: flex;
        justify-content: center;        
    }
}

.l-button-table > .l-two-third {
    float: none;
    margin-left: 0;
    margin-right: 0;
} 

.l-flex {
	display:flex;
	flex-wrap: wrap;
}