@container-breakpoints-xs: 0;
@container-breakpoints-sm: 600px;
@container-breakpoints-md: 900px;
@container-breakpoints-lg: 1200px;
@container-breakpoints-xl: 1536px;

@container-max-width-xs: 444px;
@container-max-width-sm: 600px;
@container-max-width-md: 900px;
@container-max-width-lg: 1200px;
@container-max-width-xl: 1536px;

.cr-container {
  width: 100%;
  margin-left: auto;
  box-sizing: border-box;
  margin-right: auto;
  display: block;
  padding-left: 16px;
  padding-right: 16px;

  @media (min-width: 600px) {
    padding-left: 24px;
    padding-right: 24px;
  }

  &--xs {
    @media (min-width: @container-breakpoints-xs) {
      max-width: @container-max-width-xs;
    }
  }

  &--sm {
    @media (min-width: @container-breakpoints-sm) {
      max-width: @container-max-width-sm;
    }
  }

  &--md {
    @media (min-width: @container-breakpoints-md) {
      max-width: @container-max-width-md;
    }
  }

  &--lg {
    @media (min-width: @container-breakpoints-lg) {
      max-width: @container-max-width-lg;
    }
  }

  &--xl {
    @media (min-width: @container-breakpoints-xl) {
      max-width: @container-max-width-xl;
    }
  }

}