.wrapper {
  overflow: hidden;
  padding-left: 18px;
  padding-right: 18px;
  max-width: 1236px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
/*
  &--medium {
    max-width: 976px;
  }

  &--narrow {
    max-width: 470px;
  }

  &--no-padding-until-medium {
    padding-left: 0;
    padding-right: 0;

    @mixin atMedium {
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  &--no-padding-until-large {
    padding-left: 0;
    padding-right: 0;

    @mixin atLarge {
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  .wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  &--b-margin {
    margin-bottom: 1rem;

    @mixin atSmall {
      margin-bottom: 3.875rem;
    }
  }
*/
}

@media (min-width: 576px) {
  .container {
    max-width: 470px;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 3.875rem;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 976px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}