.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);
  }

  @media (min-width: 1600px) {
    max-width: 1320px;
  }
}

.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;
  }
}

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

  @media (min-width: 768px) {
    padding-left: 0;
  }

  @media (min-width: 992px) {
    margin-right: calc(50% - var(--lg-container) / 2);
  }

  @media (min-width: 1200px) {
    margin-right: calc(50% - 1140px / 2);
  }

  @media (min-width: 1400px) {
    margin-right: calc(50% - 1320px / 2);
  }

  @media (min-width: 1600px) {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 14px;
    padding-right: 14px;
  }
}