@import '../_variables';
@import '../_mixins';
@import 'breakpoint-sass/stylesheets/_breakpoint';
@import 'breakpoint-slicer/stylesheets/_breakpoint-slicer';

.msk-layout-buster {
    width: 100%;
}

.msk-layout-buster-container {
    @include msk-container-with-padding;

    @include from(8) {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
    }
}

.msk-layout-buster-slot-main,
.msk-layout-buster-slot-right {
    @include from(8) {
        flex: 0 1 auto;
    }
}

.msk-layout-buster-slot-main {
    @include from(8) {
        padding-right: calc(#{$msk--1-of-12});
        width: $msk--8-of-12;
    }
}

.msk-layout-buster-slot-right {
    @include from(8) {
        width: $msk--4-of-12;
    }

    @include from(12) {
        width: $msk--3-of-12;
    }
}

.msk-layout-buster-slot-container,
.msk-layout-buster-slot-content {
    height: 100%;
}

.msk-layout-buster-slot-container {
    padding: 0 0.5rem;
}