@import 'tailwindcss' source('../');

@theme {
  --breakout-size: calc((var(--breakpoint-xl) - var(--breakpoint-lg)) / 2);
  --ultrawide-val: minmax(calc(var(--spacing) * 4), 1fr);
  --breakout-val: minmax(0, var(--breakout-size));
  --content-val: min(100% - calc(var(--spacing) * 8), var(--breakpoint-lg));
}

:root {
  --header-height: --spacing(16);
  --main-min-height: calc(100dvh - var(--header-height));
}

@layer base {
  * {
    min-width: 0;
  }

  .content {
    grid-template-columns:
      [ultrawide-start] var(--ultrawide-val) [breakout-start] var(--breakout-val) [content-start] var(--content-val) [content-end] var(--breakout-val) [breakout-end] var(--ultrawide-val) [ultrawide-end];
  }

  .content>* {
    grid-column: content;
  }
}