@inkline/inkline/components/IContainer/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Breakpoint mixins
 */
.container {
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: var(--grid--xs--width);
  max-width: var(--grid--xs--width);
  padding-left: calc(var(--grid--xs--gutter) / 2);
  padding-right: calc(var(--grid--xs--gutter) / 2);
}
@media screen and (min-width: 576px) {
  .container {
    max-width: var(--grid--sm--width);
    padding-left: calc(var(--grid--sm--gutter) / 2);
    padding-right: calc(var(--grid--sm--gutter) / 2);
  }
}
@media screen and (min-width: 768px) {
  .container {
    max-width: var(--grid--md--width);
    padding-left: calc(var(--grid--md--gutter) / 2);
    padding-right: calc(var(--grid--md--gutter) / 2);
  }
}
@media screen and (min-width: 992px) {
  .container {
    max-width: var(--grid--lg--width);
    padding-left: calc(var(--grid--lg--gutter) / 2);
    padding-right: calc(var(--grid--lg--gutter) / 2);
  }
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: var(--grid--xl--width);
    padding-left: calc(var(--grid--xl--gutter) / 2);
    padding-right: calc(var(--grid--xl--gutter) / 2);
  }
}
@media screen and (min-width: 1400px) {
  .container {
    max-width: var(--grid--2xl--width);
    padding-left: calc(var(--grid--2xl--gutter) / 2);
    padding-right: calc(var(--grid--2xl--gutter) / 2);
  }
}
.container.-fluid {
  max-width: 100%;
}