/**
 * Container
 */

@use '../../../css/mixins' as mixins;

.container {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: var(--grid--xs--width);

    @each $breakpoint-name in mixins.$breakpoint-keys {
        @include mixins.breakpoint-up($breakpoint-name) {
            max-width: var(--grid--#{$breakpoint-name}--width);
            padding-left: calc(var(--grid--#{$breakpoint-name}--gutter) / 2);
            padding-right: calc(var(--grid--#{$breakpoint-name}--gutter) / 2);
        }
    }

    &.-fluid {
        max-width: 100%;
    }
}