// Layout helper classes

.is-invisible {
  @include is-hidden;
}

.is-hidden {
  display: none;
}

.is-hidden-on-small-screens {

  @include respond-below($break-small) {
    display: none !important;
  }
}

.is-hidden-on-large-screens {

  @include respond-at-and-above($break-small) {
    display: none !important;
  }
}

.clearfix {
  @include clearfix;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-hoisted {
  @include respond-at-and-above(1200px) {
    margin-top: -40px;
  }
}

/**
 * @file Layout Helper Classes
 * @module Helper Classes
 * @overview Utility helper classes for common layout manipulations
 * @todo remove .mx-auto, .-hoisted when we redo storefront pages
 */

.is-invisible {
  @include is-hidden;
}

.is-hidden {
  display: none;
}

.is-hidden-on-small-screens {

  @include respond-below($break-small) {
    display: none !important;
  }
}

.is-hidden-on-large-screens {

  @include respond-at-and-above($break-small) {
    display: none !important;
  }
}

.clearfix {
  @include clearfix;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-hoisted {
  @include respond-at-and-above(1200px) {
    margin-top: -40px;
  }
}

Add comments to helper classes, todo for cleanup
Add comments to helper classes, todo for cleanup