visibility_10.scss

:root {
  --display: block;
}

[class^="display--"] {
  display: none !important;
}

@include breakpoint(xs) {
  .display--xs {
    display: var(--display) !important;
  }

  .hide--xs {
    display: none !important;
  }
}

@include breakpoint(sm) {
  .display--sm {
    display: var(--display) !important;
  }

  .hide--sm {
    display: none !important;
  }
}

@include breakpoint(md) {
  .display--md {
    display: var(--display) !important;
  }

  .hide--md {
    display: none !important;
  }
}

@include breakpoint(lg) {
  .display--lg {
    display: var(--display) !important;
  }

  .hide--lg {
    display: none !important;
  }
}

@include breakpoint(xl) {
  .display--xl {
    display: var(--display) !important;
  }

  .hide--xl {
    display: none !important;
  }
}

// component code - not included in the _visibility.scss file
.component div {
  --display: inline-block;
  display: var(--display);
}