@mixin container {
  @each $size, $width in $screen-breakpoints {
    &--#{$size} {
      max-width: $width;
    }
  }
  width: 100%;
  margin: $spacing-auto;
}

@mixin container--responsive($screen-width) {
  @each $size, $width in $screen-breakpoints {
    &--#{$size}\@#{$screen-width} {
      max-width: $width;
    }
  }
}

.o-container {
  @include container;

  @include media-query(sm) {
    @include container--responsive(sm);
  }

  @include media-query(md) {
    @include container--responsive(md);
  }

  @include media-query(lg) {
    @include container--responsive(lg);
  }

  @include media-query(xl) {
    @include container--responsive(xl);
  }
}