// ---------- inline utility classes -----------

[class*=inline-visible] {
  display: none;
}

@media (min-width: $breakpoint-small) {
  .inline-visible--small {
    display: inline;
  }
}

@media (min-width: $breakpoint-medium) {
  .inline-visible--medium {
    display: inline;
  }
}

@media (min-width: $breakpoint-large) {
  .inline-visible--large {
    display: inline;
  }
}

@media (min-width: $breakpoint-xlarge) {
  .inline-visible--xlarge {
    display: inline;
  }
}

@media (min-width: $breakpoint-full) {
  .inline-visible--full {
    display: inline;
  }
}

.block-visible-small {
  display: none;

  @media (min-width: $screen-small) {
    display: block;
  }
}

.block-hidden-small {
  display: block;

  @media (min-width: $screen-small) {
    display: none;
  }
}


// ---------- background utility classes -----------

.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg--space-y {
  padding-top: $column-gutter * 2;
  padding-bottom: $column-gutter * 2;
}

.bg--grey-xlight {
  background-color: $colour-grey-xlight;
}

.bg--white-overlay {
  &::before {
    content: '';
    display: block;
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 1;
    background-color: rgba(#fff, 0.7);
  }
}