.wrapper {
    width: 100%;

    &--small {
        max-width: $wrapper--small;
        margin: 0 auto;
    }

    &--large {
        max-width: $site-width;
        margin: 0 auto;
    }

    &--main {
        padding: 20px;
        background-color: $color--white;
    }

    &--flex {
        display: flex;
        flex-direction: column;

        @include media-query(tablet-portrait) {
            flex-direction: row;
        }
    }
}