@layer composition {

  /* === FULLSCREEN === */
  [class*="fullscreen"] { margin: 0; padding: 0; height: 100svh; min-height: 100svh; max-height: 100svh; overflow: hidden; }

  /* === FLEX PRIMITIVES === */
  [class*="flex:cluster"] { display: flex; flex-wrap: wrap; }
  [class*="flex:stack"] { display: flex; flex-direction: column; }
  :where([class*="flex:split"]) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  :where([class*="flex:split"]), :where([class*="flex:split"][class*="\-row"]) { flex-direction: row; }
  :where([class*="flex:split"]:not([class*="\-col"]) > :first-child) { flex: 0 1 auto; }
  :where([class*="flex:split"][class*="\-col"]) { flex-direction: column; block-size: auto; inline-size: auto; align-self: stretch; }
  [class*="flex:spread-row"] { display: flex; flex-direction: row; justify-content: space-between; }
  [class*="flex:spread-column"] { display: flex; flex-direction: column; justify-content: space-between; }
  /* Flank: 2-child layout where one item flanks and one fills remaining space */
  :where([class*="flex:flank"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    --content-percentage: initial;
    --flank-size: initial;
  }
  /* flank-start (default): first child flanks, second fills */
  :where([class*="flex:flank"]:not([class*="-end"]) > :first-child),
  :where([class*="flex:flank"][class*="-start"] > :first-child) {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  :where([class*="flex:flank"]:not([class*="-end"]) > :last-child),
  :where([class*="flex:flank"][class*="-start"] > :last-child) {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }
  /* flank-end: last child flanks, first fills */
  :where([class*="flex:flank"][class*="-end"] > :last-child) {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  :where([class*="flex:flank"][class*="-end"] > :first-child) {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }

  /* === GRID PRIMITIVES === */
  [class*="grid:lcr"] { display: grid; grid-template-columns: 1fr auto 1fr; }
  [class*="grid:lcr"] > :first-child { justify-self: start; }
  [class*="grid:lcr"] > :last-child { justify-self: end; }
  [class*="grid:tmb"] { display: grid; grid-template-rows: 1fr auto 1fr; }
  [class*="grid:tmb"] > :first-child { align-self: start; }
  [class*="grid:tmb"] > :last-child { align-self: end; }
  [class*="grid:pancake"] { display: grid; grid-template-rows: auto 1fr auto; }
  [class*="grid:hero"] { display: grid; grid-template: auto 1fr auto / auto 1fr auto; height: 100%; width: 100% }
  [class*="grid:auto-fit"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 250px), 1fr)); }
  [class*="grid:auto-fill"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr)); }

  /* === FRAME (aspect ratio) === */
  [class*="frame"] { aspect-ratio: 1; overflow: hidden; }
  [class*="frame:landscape"] { aspect-ratio: 16 / 9; }
  [class*="frame:portrait"] { aspect-ratio: 9 / 16; }
  [class*="frame"] > * { width: 100%; height: 100%; object-fit: cover; }

}