layout-style-css 2.1.1 → 3.0.0

package/dist/personalities/neumorphism.css

@@ -1,46 +1,22 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-/* Layout style: neumorphism. A calm right rail preserves a compact workspace. */
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
 @layer ly.personalities.neumorphism {
   :where(.ly-root[data-ly-layout="neumorphism"]) {
+    --ly-personality-wrapper-max: 84rem;
+    --ly-profile-gap: var(--ly-space-6);
+    --ly-grid-min: 17rem;
     --ly-recipe-rail: 17rem;
     --ly-recipe-aside: 19rem;
-    --ly-grid-columns: 4;
-    --ly-grid-min: 17rem;
-    --ly-personality-wrapper-max: 84rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="neumorphism"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 52rem) {
-    :where(.ly-root[data-ly-layout="neumorphism"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header sidebar"
-        "main sidebar"
-        "aside sidebar"
-        "footer sidebar";
-      grid-template-rows: auto minmax(0, 1fr) auto auto;
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 17rem), 0.3fr);
-    }
-
-    :where(.ly-root[data-ly-layout="neumorphism"]) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-ly-layout="neumorphism"])
-      :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(0, 0.58fr) minmax(min(100%, 19rem), 0.42fr);
-    }
+    --ly-app-shell-wide-areas:
+      "header sidebar"
+      "main sidebar"
+      "aside sidebar"
+      "footer sidebar";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
+    --ly-list-detail-wide-columns:
+      minmax(0, 1.1fr)
+      minmax(min(100%, var(--ly-pane-size)), 0.7fr);
   }
 }

package/dist/personalities/retro-glass.css

@@ -1,47 +1,19 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
-/* Layout style: retro-glass. A stepped right rail floats beside a wide stage. */
-
-@layer ly.personalities.retro_glass {
+@layer ly.personalities.retro-glass {
   :where(.ly-root[data-ly-layout="retro-glass"]) {
-    --ly-recipe-rail: 18rem;
-    --ly-recipe-aside: 20rem;
-    --ly-grid-columns: 8;
-    --ly-grid-min: 15rem;
     --ly-personality-wrapper-max: 104rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="retro-glass"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 56rem) {
-    :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-ly-layout="retro-glass"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header sidebar"
-        "main main sidebar"
-        "aside footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(0, 1.25fr)
-        minmax(0, 0.75fr)
-        minmax(min(100%, 18rem), 0.32fr);
-    }
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-grid-min: 15rem;
+    --ly-recipe-rail: 18rem;
+    --ly-recipe-aside: 18rem;
+    --ly-app-shell-wide-areas:
+      "header header sidebar"
+      "main main sidebar"
+      "aside footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1.25fr)
+      minmax(0, 0.75fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.32fr);
   }
 }

package/dist/personalities/retrofuturism.css

@@ -1,39 +1,19 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-/* Layout style: retrofuturism. Twin rails frame a focused central work zone. */
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
 @layer ly.personalities.retrofuturism {
   :where(.ly-root[data-ly-layout="retrofuturism"]) {
+    --ly-personality-wrapper-max: 106rem;
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-grid-min: 14rem;
     --ly-recipe-rail: 14rem;
     --ly-recipe-aside: 17rem;
-    --ly-grid-columns: 6;
-    --ly-grid-min: 14rem;
-    --ly-personality-wrapper-max: 106rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) {
-      grid-column: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-ly-layout="retrofuturism"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header aside"
-        "sidebar main aside"
-        "sidebar footer aside";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 14rem), 0.24fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 17rem), 0.3fr);
-    }
+    --ly-app-shell-wide-areas:
+      "sidebar header aside"
+      "sidebar main aside"
+      "sidebar footer aside";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.24fr)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.3fr);
   }
 }

package/dist/personalities/split-screen.css

@@ -1,41 +1,29 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
-/* Layout style: split-screen. Equal tracks keep two primary experiences in balance. */
-
-@layer ly.personalities.split_screen {
+@layer ly.personalities.split-screen {
   :where(.ly-root[data-ly-layout="split-screen"]) {
-    --ly-grid-columns: 2;
-    --ly-grid-min: 20rem;
     --ly-personality-wrapper-max: 100%;
-    --ly-split-primary: 1fr;
-    --ly-split-secondary: 1fr;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="split-screen"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header"
-        "main sidebar"
-        "aside sidebar"
-        "footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto auto;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-ly-layout="split-screen"])
-      :where(
-        .ly-split,
-        .ly-split-hero,
-        [data-ly-recipe="split-hero"],
-        .ly-list-detail,
-        [data-ly-recipe="list-detail"]
-      ) {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    }
+    --ly-profile-gap: var(--ly-space-4);
+    --ly-grid-min: 20rem;
+    /*
+      Fixed preferred halves leave a shrink-safe center track in recipes that
+      retain the shared three-column dashboard topology.
+    */
+    --ly-recipe-rail: 24rem;
+    --ly-recipe-aside: 24rem;
+    --ly-app-shell-wide-areas:
+      "header header"
+      "main sidebar"
+      "aside sidebar"
+      "footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1fr)
+      minmax(0, 1fr);
+    --ly-split-hero-wide-columns:
+      minmax(0, 1fr)
+      minmax(0, 1fr);
+    --ly-list-detail-wide-columns:
+      minmax(0, 1fr)
+      minmax(0, 1fr);
   }
 }

package/dist/personalities/synthwave.css

@@ -1,48 +1,20 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-/* Layout style: synthwave. A cinematic center stage sits between support zones. */
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
 @layer ly.personalities.synthwave {
   :where(.ly-root[data-ly-layout="synthwave"]) {
+    --ly-personality-wrapper-max: 112rem;
+    --ly-profile-gap: var(--ly-space-6);
+    --ly-grid-min: 14rem;
     --ly-recipe-rail: 16rem;
     --ly-recipe-aside: 20rem;
-    --ly-grid-columns: 12;
-    --ly-grid-min: 14rem;
-    --ly-reel-item-max: 34rem;
-    --ly-personality-wrapper-max: 112rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="synthwave"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-ly-layout="synthwave"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header header"
-        "sidebar main aside"
-        "footer footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 16rem), 0.28fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 20rem), 0.34fr);
-    }
-
-    :where(.ly-root[data-ly-layout="synthwave"]) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 3;
-    }
-
-    :where(.ly-root[data-ly-layout="synthwave"]) .ly-reel {
-      grid-auto-columns: minmax(min(100%, 20rem), var(--ly-reel-item-max));
-    }
+    --ly-app-shell-wide-areas:
+      "header header header"
+      "sidebar main aside"
+      "footer footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.34fr);
+    --ly-reel-item-min: 20rem;
   }
 }

package/dist/personalities/tactile.css

@@ -1,39 +1,22 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-/* Layout style: tactile. A compact left rail leaves a broad, steady work lane. */
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
 @layer ly.personalities.tactile {
   :where(.ly-root[data-ly-layout="tactile"]) {
+    --ly-personality-wrapper-max: 82rem;
+    --ly-profile-gap: var(--ly-space-4);
+    --ly-grid-min: 15rem;
     --ly-recipe-rail: 17rem;
     --ly-recipe-aside: 20rem;
-    --ly-grid-columns: 5;
-    --ly-grid-min: 15rem;
-    --ly-personality-wrapper-max: 82rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="tactile"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header"
-        "sidebar main"
-        "sidebar aside"
-        "sidebar footer";
-      grid-template-rows: auto minmax(0, 1fr) auto auto;
-      grid-template-columns: minmax(min(100%, 17rem), 0.28fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-ly-layout="tactile"]) .ly-grid > :nth-child(5n + 2) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-ly-layout="tactile"])
-      :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(min(100%, 20rem), 0.42fr) minmax(0, 0.58fr);
-    }
+    --ly-app-shell-wide-areas:
+      "header header"
+      "sidebar main"
+      "aside main"
+      "footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
+      minmax(0, 1fr);
+    --ly-list-detail-wide-columns:
+      minmax(min(100%, var(--ly-pane-size)), 0.5fr)
+      minmax(0, 0.9fr);
   }
 }

package/dist/personalities/y2k.css

@@ -1,39 +1,19 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-/* Layout style: y2k. A tall right rail frames a reversed supporting workspace. */
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
 @layer ly.personalities.y2k {
   :where(.ly-root[data-ly-layout="y2k"]) {
-    --ly-recipe-rail: 16rem;
-    --ly-recipe-aside: 18rem;
-    --ly-grid-columns: 5;
-    --ly-grid-min: 13rem;
     --ly-personality-wrapper-max: 90rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) {
-      grid-column: span 3;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-ly-layout="y2k"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header sidebar"
-        "aside main sidebar"
-        "footer footer sidebar";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 18rem), 0.34fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 16rem), 0.28fr);
-    }
+    --ly-profile-gap: var(--ly-space-6);
+    --ly-grid-min: 13rem;
+    --ly-recipe-rail: 18rem;
+    --ly-recipe-aside: 16rem;
+    --ly-app-shell-wide-areas:
+      "header header sidebar"
+      "aside main sidebar"
+      "footer footer sidebar";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-aside)), 0.34fr)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.28fr);
   }
 }

package/dist/personalities/z-pattern.css

@@ -1,52 +1,22 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
-/* Layout style: z-pattern. A right rail closes a diagonal reading progression. */
-
-@layer ly.personalities.z_pattern {
+@layer ly.personalities.z-pattern {
   :where(.ly-root[data-ly-layout="z-pattern"]) {
+    --ly-personality-wrapper-max: 108rem;
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-grid-min: 14rem;
     --ly-recipe-rail: 17rem;
     --ly-recipe-aside: 19rem;
-    --ly-grid-columns: 8;
-    --ly-grid-min: 14rem;
-    --ly-personality-wrapper-max: 108rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="z-pattern"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 60rem) {
-    :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) {
-      grid-column: span 2;
-      align-self: end;
-    }
-
-    :where(.ly-root[data-ly-layout="z-pattern"])
-      :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-ly-layout="z-pattern"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header sidebar"
-        "main aside sidebar"
-        "footer aside sidebar";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(0, 1.45fr)
-        minmax(min(100%, 19rem), 0.55fr)
-        minmax(min(100%, 17rem), 0.3fr);
-    }
+    --ly-app-shell-wide-areas:
+      "header header sidebar"
+      "main aside sidebar"
+      "footer aside sidebar";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1.45fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.55fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
+    --ly-split-hero-wide-columns:
+      minmax(0, 1.5fr)
+      minmax(0, 0.5fr);
   }
 }

package/dist/personalities.css

@@ -1,4 +1,4 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
 @import url("./personalities/minimal-saas.css");
 @import url("./personalities/bento.css");

package/dist/primitives.css

@@ -1,10 +1,13 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
-/* Reusable composition primitives own flow and sizing only. */
+/* Composition primitives use intrinsic sizing so their content chooses reflow points. */
 
 @layer ly.primitives {
   .ly-page {
-    min-block-size: 100svh;
+    min-block-size: 100vh;
+    min-block-size: 100dvh;
+    padding-block-start: var(--ly-safe-area-block-start);
+    padding-block-end: var(--ly-safe-area-block-end);
   }
 
   .ly-header,
@@ -21,9 +24,9 @@
   }
 
   .ly-header--sticky {
-    position: sticky;
+    position: var(--ly-sticky-position, sticky);
     inset-block-start: 0;
-    z-index: var(--ly-z-header);
+    z-index: var(--ly-z-header, 20);
   }
 
   .ly-section {
@@ -63,6 +66,7 @@
   .ly-cover {
     display: flex;
     flex-direction: column;
+    min-block-size: 100vh;
     min-block-size: var(--ly-cover-min);
     padding-block: var(--ly-cover-padding, var(--ly-space-5));
   }
@@ -92,6 +96,7 @@
   .ly-sidebar > :where(.ly-sidebar__side, [data-ly-sidebar="side"]) {
     flex-basis: var(--ly-sidebar-size);
     flex-grow: 1;
+    min-inline-size: min(100%, var(--ly-sidebar-size));
   }
 
   .ly-sidebar > :where(.ly-sidebar__content, [data-ly-sidebar="content"]) {
@@ -102,55 +107,44 @@
 
   .ly-grid {
     display: grid;
-    grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  .ly-grid--auto {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
+    gap: var(--ly-grid-gap);
   }
 
-  .ly-grid > *,
-  .ly-split > *,
-  .ly-panes > *,
-  .ly-media > * {
-    min-inline-size: 0;
+  .ly-grid--fixed {
+    grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
   }
 
   .ly-split {
     display: grid;
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-split-min)), 1fr));
     gap: var(--ly-gap);
     align-items: var(--ly-split-align, center);
   }
 
   .ly-panes {
     display: grid;
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-pane-min)), 1fr));
     gap: var(--ly-gap);
   }
 
   .ly-media {
     display: grid;
-    grid-template-areas:
-      "media"
-      "content"
-      "actions";
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-media-min)), 1fr));
     gap: var(--ly-gap);
     align-items: var(--ly-media-align, start);
   }
 
-  .ly-media > :where(.ly-media__asset, [data-ly-media="asset"]) {
-    grid-area: media;
-  }
-
-  .ly-media > :where(.ly-media__content, [data-ly-media="content"]) {
-    grid-area: content;
+  .ly-media > :where(.ly-media__actions, [data-ly-media="actions"]) {
+    min-inline-size: min(100%, var(--ly-media-size));
   }
 
-  .ly-media > :where(.ly-media__actions, [data-ly-media="actions"]) {
-    grid-area: actions;
+  .ly-grid > *,
+  .ly-split > *,
+  .ly-panes > *,
+  .ly-media > * {
+    min-inline-size: 0;
+    min-block-size: 0;
   }
 
   .ly-reel {
@@ -159,7 +153,6 @@
     grid-auto-columns: minmax(min(100%, var(--ly-reel-item-min)), var(--ly-reel-item-max));
     gap: var(--ly-grid-gap);
     overflow-x: auto;
-    overflow-inline: auto;
     overscroll-behavior-inline: contain;
     scroll-snap-type: inline proximity;
   }
@@ -183,37 +176,8 @@
   .ly-scroll {
     min-block-size: 0;
     max-block-size: var(--ly-scroll-max);
-    overflow: auto;
-    overscroll-behavior: contain;
-  }
-
-  /* Unsupported container-query browsers retain this safe DOM-order stack. */
-}
-
-@layer ly.primitives {
-  @container (min-width: 48rem) {
-    .ly-split {
-      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
-    }
-
-    .ly-panes--2 {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-pane-size)), 0.7fr);
-    }
-
-    .ly-media {
-      grid-template-areas:
-        "media content"
-        "media actions";
-      grid-template-columns: minmax(min(100%, var(--ly-media-size)), auto) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 64rem) {
-    .ly-panes--3 {
-      grid-template-columns:
-        minmax(min(100%, var(--ly-pane-rail, 14rem)), 0.35fr)
-        minmax(0, 1fr)
-        minmax(min(100%, var(--ly-pane-rail, 14rem)), 0.35fr);
-    }
+    overflow-x: clip;
+    overflow-y: auto;
+    overscroll-behavior-block: contain;
   }
 }