@ozen-ui/kit/__inner__/esm/components/Container/Container.css

React component library

/* xs >= 0px */
/* s >= 640px */
/* m >= 1024px */
/* l >= 1280px */
.Container {
  inline-size: 100%;
  box-sizing: border-box;
}
.Container_position_start {
      margin-inline: 0 auto;
    }
.Container_position_center {
      margin-inline: auto auto;
    }
.Container_maxWidth_s {
    max-inline-size: var(--breakpoint-s);
  }
.Container_maxWidth_m {
    max-inline-size: var(--breakpoint-m);
  }
.Container_maxWidth_l {
    max-inline-size: var(--breakpoint-l);
  }
.Container_maxWidth_fullWidth {
    max-inline-size: 100%;
  }
.Container_gutters_xs {
    padding: 0 var(--spacing-3xs);
  }
.Container_gutters_s {
    padding: 0 var(--spacing-2xs);
  }
.Container_gutters_m {
    padding: 0 var(--spacing-xs);
  }
.Container_gutters_l {
    padding: 0 var(--spacing-s);
  }
.Container_gutters_xl {
    padding: 0 var(--spacing-m);
  }
.Container_gutters_2xl {
    padding: 0 var(--spacing-l);
  }
@media (min-width: 0) {
      .Container_gutters_xs_xs {
    padding: 0 var(--spacing-3xs);
  }
      .Container_gutters_xs_s {
    padding: 0 var(--spacing-2xs);
  }
      .Container_gutters_xs_m {
    padding: 0 var(--spacing-xs);
  }
      .Container_gutters_xs_l {
    padding: 0 var(--spacing-s);
  }
      .Container_gutters_xs_xl {
    padding: 0 var(--spacing-m);
  }
      .Container_gutters_xs_2xl {
    padding: 0 var(--spacing-l);
  }
      .Container_maxWidth_xs_s {
    max-inline-size: var(--breakpoint-s);
  }
      .Container_maxWidth_xs_m {
    max-inline-size: var(--breakpoint-m);
  }
      .Container_maxWidth_xs_l {
    max-inline-size: var(--breakpoint-l);
  }
      .Container_maxWidth_xs_fullWidth {
    max-inline-size: 100%;
  }
  }
@media (min-width: 640px) {
      .Container_gutters_s_xs {
    padding: 0 var(--spacing-3xs);
  }
      .Container_gutters_s_s {
    padding: 0 var(--spacing-2xs);
  }
      .Container_gutters_s_m {
    padding: 0 var(--spacing-xs);
  }
      .Container_gutters_s_l {
    padding: 0 var(--spacing-s);
  }
      .Container_gutters_s_xl {
    padding: 0 var(--spacing-m);
  }
      .Container_gutters_s_2xl {
    padding: 0 var(--spacing-l);
  }
      .Container_maxWidth_s_s {
    max-inline-size: var(--breakpoint-s);
  }
      .Container_maxWidth_s_m {
    max-inline-size: var(--breakpoint-m);
  }
      .Container_maxWidth_s_l {
    max-inline-size: var(--breakpoint-l);
  }
      .Container_maxWidth_s_fullWidth {
    max-inline-size: 100%;
  }
  }
@media (min-width: 1024px) {
      .Container_gutters_m_xs {
    padding: 0 var(--spacing-3xs);
  }
      .Container_gutters_m_s {
    padding: 0 var(--spacing-2xs);
  }
      .Container_gutters_m_m {
    padding: 0 var(--spacing-xs);
  }
      .Container_gutters_m_l {
    padding: 0 var(--spacing-s);
  }
      .Container_gutters_m_xl {
    padding: 0 var(--spacing-m);
  }
      .Container_gutters_m_2xl {
    padding: 0 var(--spacing-l);
  }
      .Container_maxWidth_m_s {
    max-inline-size: var(--breakpoint-s);
  }
      .Container_maxWidth_m_m {
    max-inline-size: var(--breakpoint-m);
  }
      .Container_maxWidth_m_l {
    max-inline-size: var(--breakpoint-l);
  }
      .Container_maxWidth_m_fullWidth {
    max-inline-size: 100%;
  }
  }
@media (min-width: 1280px) {
      .Container_gutters_l_xs {
    padding: 0 var(--spacing-3xs);
  }
      .Container_gutters_l_s {
    padding: 0 var(--spacing-2xs);
  }
      .Container_gutters_l_m {
    padding: 0 var(--spacing-xs);
  }
      .Container_gutters_l_l {
    padding: 0 var(--spacing-s);
  }
      .Container_gutters_l_xl {
    padding: 0 var(--spacing-m);
  }
      .Container_gutters_l_2xl {
    padding: 0 var(--spacing-l);
  }
      .Container_maxWidth_l_s {
    max-inline-size: var(--breakpoint-s);
  }
      .Container_maxWidth_l_m {
    max-inline-size: var(--breakpoint-m);
  }
      .Container_maxWidth_l_l {
    max-inline-size: var(--breakpoint-l);
  }
      .Container_maxWidth_l_fullWidth {
    max-inline-size: 100%;
  }
  }