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

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

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

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

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

.msk-layout-bullseye-slot-left {
    @include from(8) {
        padding-right: $msk--1-of-24;
        width: $msk--7-of-24;
    }

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

.msk-layout-bullseye-slot-main {
    @include from(8) {
        width: $msk--17-of-24;
    }

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

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

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