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

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

.msk-layout-slink-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 2400px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;

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

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

.msk-layout-slink-slot-left {
    @include from(8) {
        width: $msk--3-of-12;
    }

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

.msk-layout-slink-slot-main {
    @include from(8) {
        width: $msk--9-of-12;
    }

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

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

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