@import "../variables";
@import "~cosmoUiVariables";
@import "../mixins/paddings";
@import "../mixins/margins";

// using a combination of flexbox columns
// with inner max width to control screen size
.outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    @include margin-y($margin-lg);

}

@each $key, $val in $grid-breakpoints {
    @media screen and (min-width: $val) {

        .inner {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            @include padding-x($padding-sm);
            max-width: map-get($container-max-widths, $key);
            // padding-left: map-get($container-paddings, $key);
            // padding-right: map-get($container-paddings, $key);
        }
    }
 }