docs/src/templates/Doc.module.scss

@import 'variables';

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

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

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

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

.main {
    width: 100%;
    background: $brand-white;
    padding: 0 $spacer / 2;
    border: 1px solid $brand-grey-lighter;
    border-top: 0;
    order: 1;

    @media (min-width: $break-point--small) {
        padding-left: $spacer;
        padding-right: $spacer;
    }

    @media (min-width: $break-point--medium) {
        padding-left: $spacer * 2;
        padding-right: $spacer * 2;
        order: 2;
    }
}

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