.container,
.container-large,
.container-small {
  width: 100%;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 50rem) {
  .container,
  .container-large,
  .container-small {
    padding-right: var(--gutter);
    padding-left: var(--gutter);
    max-width: 60rem;
  }
}

.container--xs-padding {
  padding-right: var(--space-xs);
  padding-left: var(--space-xs);
}

@media (min-width: 50rem) {
  .container-large {
    max-width: 80rem;
  }
}

@media (min-width: 50rem) {
  .container-small {
    max-width: 40rem;
  }
}