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

// using a combination of flexbox columns
// with inner max width to control screen size
.outer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    min-height: max-content;
    // min-width: 100%;

}

@each $key, $val in $grid-breakpoints {
    @media screen and (min-width: $val) {
        .inner {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            min-height: max-content;
            min-width: min-content;
            max-width: map-get($container-max-widths, $key);
            width: 95%;
            // padding-left: map-get($container-paddings, $key);
            // padding-right: map-get($container-paddings, $key);
            // @include padding-x($padding-sm);
        }
    }
 }