@layer components {
  .ui-standard-container {
    @apply w-full max-w-screen-xl mx-auto px-6 sm:px-8 md:px-10 lg:px-16;
  }

  .ui-grid-gap {
    @apply gap-2 sm:gap-4 md:gap-6 xl:gap-8;
  }

  .ui-grid-gap-x {
    @apply gap-x-2 sm:gap-x-4 md:gap-x-6 xl:gap-x-8;
  }

  .ui-grid-px {
    @apply px-6 sm:px-8 md:px-10 lg:px-16;
  }

  .ui-grid-mx {
    @apply mx-6 sm:mx-8 md:mx-10 lg:mx-16;
  }

  .ui-full-borderless-container-override {
    @apply w-[625rem] ml-[calc(50%-5000px)];
  }

  .ui-full-container-override {
    @apply ml-[calc(-50vw+50%)] !px-0 w-screen;
  }
}