@import "tailwindcss/base";
@import "./base.css";

@import "tailwindcss/components";
@import "./buttons.css";
@import "./modals.css";

@import "tailwindcss/utilities";

@layer utilities {
  @responsive {
    .uc-max-w-1888 {
      max-width: 1888px;
    }

    .uc-grid-layout {
      @apply uc-flex uc-flex-col uc-relative uc-max-w-1888;
      --grid-margin-x: 16px;
      margin-left: var(--grid-margin-x);
      margin-right: var(--grid-margin-x);
    }

    /* nested grid-layouts automatically get squash - that makes it more
      reusable. only the outer-most grid-layout applies some margin */
    .uc-grid-layout .uc-grid-layout {
      --grid-margin-x: 0;
    }

    @screen lg {
      .uc-grid-layout {
        --grid-margin-x: 144px;
      }
    }

    @screen xl {
      .uc-grid-layout {
        @apply uc-mx-auto;
        --grid-margin-x: 166px;
        padding-left: var(--grid-margin-x);
        padding-right: var(--grid-margin-x);
      }
    }
  }
}