// Visible on breakpoint X
.vl-u-visible {
  @each $vl-name, $vl-align in $vl-bp-list {
    @include respond-to(map-get($vl-align, media)) {
      &--#{$vl-name} {
        display: block !important; // sass-lint:disable-line no-important
      }
    }
  }
}

// Hidden on breakpoint X
.vl-u-hidden {
  display: none;

  @each $vl-name, $vl-align in $vl-bp-list {
    @include respond-to(map-get($vl-align, media)) {
      &--#{$vl-name} {
        display: none !important; // sass-lint:disable-line no-important
      }
    }
  }
}