// I CONTAINER
#column-wrapper {
    @include make-container;
    //  background-color: $gray-content;
    padding: 3rem 15px 20px;

    //@media (max-width: $screen-xs-max) {
    // display: flex;
    // flex-flow: column-reverse;
    //}
}

#portal-column-one,
#portal-column-two {
    @include make-sm-column(3);
    padding: 0;
}
// in plone control panel o add content...
.sidebar-offcanvas #portal-column-two,
.sidebar-offcanvas #portal-column-one {
    width: auto;
    border: 0;
}

#portal-column-one {
    @media (max-width: $screen-xs-max) {
        margin-top: 40px;
    }

    .with-column-one & {
        @include make-sm-column-pull(9);
    }

    .with-column-one.with-column-two & {
        @include make-sm-column-pull(6);
    }
}

#portal-column-two {
    @media (max-width: $screen-xs-max) {
        margin-top: 50px;
    }
}

#portal-column-content {
    .with-no-columns & {
        @include make-sm-column(12);
    }

    .with-column-one &,
    .with-column-two & {
        @include make-sm-column(9);
    }
    .with-column-one & {
        @include make-sm-column-push(3);

        @media (min-width: $screen-xs-max) {
            padding-left: 6%;
            padding-right: 0;
        }
    }

    .with-column-two & {
        @media (min-width: $screen-xs-max) {
            padding-left: 0;
            padding-right: 6%;
        }
    }

    .with-column-one.with-column-two & {
        @include make-sm-column(6);

        @media (min-width: $screen-xs-max) {
            padding: 0 40px;
        }
    }
}
