@import 'variables';

.wrapper {
    @media (min-width: $break-point--medium) {
        display: flex;
    }
}

.sidebar {
    margin-top: $spacer / 2;
    margin-bottom: $spacer / 2;
    top: $spacer;

    @media (min-width: $break-point--medium) {
        width: 27%;
        margin-bottom: 0;

        + .main {
            width: 73%;
        }
    }
}

.main {
    background: $brand-white;
    padding: 0 $spacer;
    border: 1px solid $brand-grey-lighter;

    @media (min-width: $break-point--medium) {
        padding: 0 $spacer * 2;
        border-top: 0;
    }
}

.mainSingle {
    composes: main;
    max-width: 73%;
    margin: auto;
}