.container {
  max-width: 100%;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 14px;
  padding-right: 14px;

  @media (min-width: 768px) {
    max-width: 100%;
  }

  @media (min-width: 992px) {
    max-width: var(--lg-container);
  }

  @media (min-width: 1200px) {
    max-width: var(--xl-container);
  }

  @media (min-width: 1400px) {
    max-width: var(--xxl-container);
  }
}

.container-wide-with-margin {
  max-width: 100%;
  width: 100%;

  @media (min-width: 1600px) {
    max-width: var(--max);
    margin: auto;
  }

  @media (min-width: 800px) {
    padding-right: 30px;
    padding-left: 30px;
  }
}

.container-wide-no-margin {
  width: 100%;
  max-width: 100%;

  @media (min-width: 1600px) {
    max-width: var(--max);
    margin: auto;
  }
}