@import 'xtend-library/src/core/container/_container.less';

/**
 * container
 */

.container {
  .container-space();
  max-width: 1600px;
}

// space

.container-space {
  padding-right: 2rem;
  padding-left: 2rem;
  @media @min-sm {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  @media @min-md {
    padding-right: 4rem;
    padding-left: 4rem;
  }
  @media @min-lg {
    padding-right: 5rem;
    padding-left: 5rem;
  }
  @media @min-xl {
    padding-right: 6rem;
    padding-left: 6rem;
  }
}

.container-space-y {
  padding-top: 2rem;
  padding-bottom: 2rem;
  @media @min-sm {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  @media @min-md {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  @media @min-lg {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  @media @min-xl {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.container-space-remove {
  // same as .container-space
  margin-right: -2rem;
  margin-left: -2rem;
  @media @min-sm {
    margin-right: -3rem;
    margin-left: -3rem;
  }
  @media @min-md {
    margin-right: -4rem;
    margin-left: -4rem;
  }
  @media @min-lg {
    margin-right: -5rem;
    margin-left: -5rem;
  }
  @media @min-xl {
    margin-right: -6rem;
    margin-left: -6rem;
  }
}

.container-space-y-remove {
  // same as .container-space
  margin-top: -2rem;
  margin-bottom: -2rem;
  @media @min-sm {
    margin-top: -3rem;
    margin-bottom: -3rem;
  }
  @media @min-md {
    margin-top: -4rem;
    margin-bottom: -4rem;
  }
  @media @min-lg {
    margin-top: -5rem;
    margin-bottom: -5rem;
  }
  @media @min-xl {
    margin-top: -6rem;
    margin-bottom: -6rem;
  }
}