/*=============================================
=            utilities            =
=============================================*/
@layer utilities {

  /* screen reader accessibility */
  .visually-hidden,
  .sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 4px;
    width: 4px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .hide-all,
  .hidden {
    display: none !important;
  }

  @media (width >= 600px), (min-width: 600px) {
    .mobile-only,
    .small-only {
      display: none !important;
    }
  }

  @media (width <= 599px), (max-width: 599px) {
    .large-only {
      display: none !important;
    }
  }

  @media (width <= 1023px), (max-width: 1023px) {
    .xlarge-only {
      display: none !important;
    }
  }

  @media (width >= 1024px), (min-width: 1024px) {
    .xlarge-hidden {
      display: none !important;
    }
  }

  .text-center,
  .heading-center :is(h1, h2, h3, h4, h5, h6) {
    text-align: center;
  }

  .text-left,
  .heading-left :is(h1, h2, h3, h4, h5, h6) {
    text-align: left;
  }

  .text-right,
  .heading-right :is(h1, h2, h3, h4, h5, h6) {
    text-align: right;
  }

  @media (width >= 600px), (min-width: 600px) {
    .text-center-lg,
    .heading-center-lg :is(h1, h2, h3, h4, h5, h6) {
      text-align: center;
    }

    .text-left-lg,
    .heading-left-lg :is(h1, h2, h3, h4, h5, h6) {
      text-align: left;
    }

    .text-right-lg,
    .heading-right-lg :is(h1, h2, h3, h4, h5, h6) {
      text-align: right;
    }
  }

  [data-align='center'] {
    text-align: center;
  }
}