layout-style-css 2.1.1 → 3.0.0

package/styles/primitives.css

@@ -1,219 +0,0 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-/* Reusable composition primitives own flow and sizing only. */
-
-@layer ly.primitives {
-  .ly-page {
-    min-block-size: 100svh;
-  }
-
-  .ly-header,
-  .ly-footer,
-  .ly-main,
-  .ly-section,
-  .ly-surface {
-    min-inline-size: 0;
-    min-block-size: 0;
-  }
-
-  .ly-header {
-    min-block-size: var(--ly-header-height);
-  }
-
-  .ly-header--sticky {
-    position: sticky;
-    inset-block-start: 0;
-    z-index: var(--ly-z-header);
-  }
-
-  .ly-section {
-    padding-block: var(--ly-section-padding-block);
-  }
-
-  .ly-section--compact {
-    --ly-section-padding-block: var(--ly-space-7);
-  }
-
-  .ly-section--flush {
-    --ly-section-padding-block: 0;
-  }
-
-  .ly-readable {
-    max-inline-size: var(--ly-wrapper-prose);
-  }
-
-  .ly-stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ly-stack-gap);
-  }
-
-  .ly-cluster {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ly-cluster-gap);
-  }
-
-  .ly-center {
-    inline-size: min(100%, var(--ly-center-max, var(--ly-wrapper-content)));
-    margin-inline: auto;
-  }
-
-  .ly-cover {
-    display: flex;
-    flex-direction: column;
-    min-block-size: var(--ly-cover-min);
-    padding-block: var(--ly-cover-padding, var(--ly-space-5));
-  }
-
-  .ly-cover > :where(.ly-cover__center, [data-ly-cover-center]) {
-    margin-block: auto;
-  }
-
-  .ly-switcher {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ly-gap);
-  }
-
-  .ly-switcher > * {
-    flex-basis: calc((var(--ly-switcher-threshold) - 100%) * 999);
-    flex-grow: 1;
-    min-inline-size: 0;
-  }
-
-  .ly-sidebar {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ly-gap);
-  }
-
-  .ly-sidebar > :where(.ly-sidebar__side, [data-ly-sidebar="side"]) {
-    flex-basis: var(--ly-sidebar-size);
-    flex-grow: 1;
-  }
-
-  .ly-sidebar > :where(.ly-sidebar__content, [data-ly-sidebar="content"]) {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-inline-size: min(100%, var(--ly-sidebar-content-min));
-  }
-
-  .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));
-  }
-
-  .ly-grid > *,
-  .ly-split > *,
-  .ly-panes > *,
-  .ly-media > * {
-    min-inline-size: 0;
-  }
-
-  .ly-split {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--ly-gap);
-    align-items: var(--ly-split-align, center);
-  }
-
-  .ly-panes {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--ly-gap);
-  }
-
-  .ly-media {
-    display: grid;
-    grid-template-areas:
-      "media"
-      "content"
-      "actions";
-    grid-template-columns: minmax(0, 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"]) {
-    grid-area: actions;
-  }
-
-  .ly-reel {
-    display: grid;
-    grid-auto-flow: column;
-    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;
-  }
-
-  .ly-reel > * {
-    min-inline-size: 0;
-    scroll-snap-align: start;
-  }
-
-  .ly-frame {
-    aspect-ratio: var(--ly-frame-ratio);
-    overflow: hidden;
-  }
-
-  .ly-frame > * {
-    inline-size: 100%;
-    block-size: 100%;
-    object-fit: cover;
-  }
-
-  .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);
-    }
-  }
-}

package/styles/recipes.css

@@ -1,278 +0,0 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-/*
-  Built-in recipes follow semantic mobile DOM order. Wider arrangements use
-  named areas so visual placement never changes keyboard or reading order.
-*/
-
-@layer ly.recipes {
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"]),
-  :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
-  :where(.ly-docs, [data-ly-recipe="docs"]),
-  :where(.ly-list-detail, [data-ly-recipe="list-detail"]),
-  :where(.ly-split-hero, [data-ly-recipe="split-hero"]),
-  :where(.ly-gallery, [data-ly-recipe="gallery"]),
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-    container-name: ly-recipe;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"]),
-  :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
-  :where(.ly-docs, [data-ly-recipe="docs"]),
-  :where(.ly-list-detail, [data-ly-recipe="list-detail"]),
-  :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--ly-gap);
-  }
-
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-    min-block-size: 100svh;
-    grid-template-areas:
-      "header"
-      "sidebar"
-      "main"
-      "aside"
-      "footer";
-    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
-  }
-
-  :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
-    grid-template-areas:
-      "header"
-      "nav"
-      "main"
-      "aside"
-      "footer";
-  }
-
-  :where(.ly-docs, [data-ly-recipe="docs"]) {
-    grid-template-areas:
-      "header"
-      "nav"
-      "main"
-      "aside"
-      "footer";
-  }
-
-  :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-    grid-template-areas:
-      "primary"
-      "secondary"
-      "actions";
-  }
-
-  :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-    grid-template-areas:
-      "content"
-      "media"
-      "actions";
-    align-items: var(--ly-split-hero-align, center);
-  }
-
-  :where(.ly-gallery, [data-ly-recipe="gallery"]),
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-    display: grid;
-    gap: var(--ly-grid-gap);
-  }
-
-  :where(.ly-gallery, [data-ly-recipe="gallery"]) {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
-  }
-
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
-  }
-
-  :where(.ly-gallery, [data-ly-recipe="gallery"]) > *,
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) > * {
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--header, [data-ly-area="header"]) {
-    grid-area: header;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--nav, [data-ly-area="nav"]) {
-    grid-area: nav;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--main, [data-ly-area="main"]) {
-    grid-area: main;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--aside, [data-ly-area="aside"]) {
-    grid-area: aside;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--footer, [data-ly-area="footer"]) {
-    grid-area: footer;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--content, [data-ly-area="content"]) {
-    grid-area: content;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--media, [data-ly-area="media"]) {
-    grid-area: media;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--actions, [data-ly-area="actions"]) {
-    grid-area: actions;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--primary, [data-ly-area="primary"]) {
-    grid-area: primary;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-area--secondary, [data-ly-area="secondary"]) {
-    grid-area: secondary;
-    min-inline-size: 0;
-  }
-
-  .ly-app-header {
-    grid-area: header;
-    min-inline-size: 0;
-  }
-
-  .ly-app-sidebar {
-    grid-area: sidebar;
-    min-inline-size: 0;
-  }
-
-  .ly-app-main {
-    grid-area: main;
-    min-inline-size: 0;
-  }
-
-  .ly-app-aside {
-    grid-area: aside;
-    min-inline-size: 0;
-  }
-
-  .ly-app-footer {
-    grid-area: footer;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"])
-    > :where(.ly-area--nav, [data-ly-area="nav"]) {
-    grid-area: sidebar;
-  }
-
-  /*
-    A recipe responds to its nearest ancestor container and then becomes the
-    containment scope for nested compositions. Standalone roots keep the safe
-    mobile template when no ancestor container is present.
-  */
-  @container (min-width: 48rem) {
-    :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header"
-        "sidebar main"
-        "aside main"
-        "footer footer";
-      grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
-    }
-
-    :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
-      grid-template-areas:
-        "header header"
-        "nav nav"
-        "main aside"
-        "footer footer";
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
-    }
-
-    :where(.ly-docs, [data-ly-recipe="docs"]) {
-      grid-template-areas:
-        "header header"
-        "nav main"
-        "nav aside"
-        "footer footer";
-      grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
-    }
-
-    :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-areas:
-        "primary secondary"
-        "actions actions";
-      grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.7fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-areas:
-        "content media"
-        "actions media";
-      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
-    }
-
-    :where(.ly-gallery, [data-ly-recipe="gallery"]) {
-      --ly-gallery-min: 14rem;
-    }
-
-    :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-      --ly-card-grid-min: 18rem;
-    }
-  }
-
-  @container (min-width: 64rem) {
-    :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header header"
-        "sidebar main aside"
-        "sidebar footer footer";
-      grid-template-columns:
-        minmax(min(100%, var(--ly-recipe-rail)), auto)
-        minmax(0, 1fr)
-        minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
-    }
-
-    :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
-      grid-template-areas:
-        "nav header header"
-        "nav main aside"
-        "nav footer footer";
-      grid-template-columns:
-        minmax(min(100%, var(--ly-recipe-rail)), auto)
-        minmax(0, 1fr)
-        minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
-    }
-
-    :where(.ly-docs, [data-ly-recipe="docs"]) {
-      grid-template-areas:
-        "nav header"
-        "nav main"
-        "nav aside"
-        "nav footer";
-      grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
-    }
-
-    :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
-    }
-
-    :where(.ly-gallery, [data-ly-recipe="gallery"]) {
-      --ly-gallery-min: 16rem;
-    }
-
-    :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-      --ly-card-grid-min: 20rem;
-    }
-  }
-}

package/styles/utilities.css

@@ -1,162 +0,0 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-@layer ly.utilities {
-  .ly-cols-1 { --ly-grid-columns: 1; }
-  .ly-cols-2 { --ly-grid-columns: 2; }
-  .ly-cols-3 { --ly-grid-columns: 3; }
-  .ly-cols-4 { --ly-grid-columns: 4; }
-  .ly-cols-5 { --ly-grid-columns: 5; }
-  .ly-cols-6 { --ly-grid-columns: 6; }
-  .ly-cols-7 { --ly-grid-columns: 7; }
-  .ly-cols-8 { --ly-grid-columns: 8; }
-  .ly-cols-9 { --ly-grid-columns: 9; }
-  .ly-cols-10 { --ly-grid-columns: 10; }
-  .ly-cols-11 { --ly-grid-columns: 11; }
-  .ly-cols-12 { --ly-grid-columns: 12; }
-  .ly-cols-16 { --ly-grid-columns: 16; }
-
-  .ly-span-1 { grid-column: span 1; }
-  .ly-span-2 { grid-column: span 2; }
-  .ly-span-3 { grid-column: span 3; }
-  .ly-span-4 { grid-column: span 4; }
-  .ly-span-5 { grid-column: span 5; }
-  .ly-span-6 { grid-column: span 6; }
-  .ly-span-7 { grid-column: span 7; }
-  .ly-span-8 { grid-column: span 8; }
-  .ly-span-9 { grid-column: span 9; }
-  .ly-span-10 { grid-column: span 10; }
-  .ly-span-11 { grid-column: span 11; }
-  .ly-span-12 { grid-column: span 12; }
-  .ly-span-13 { grid-column: span 13; }
-  .ly-span-14 { grid-column: span 14; }
-  .ly-span-15 { grid-column: span 15; }
-  .ly-span-16 { grid-column: span 16; }
-  .ly-span-full { grid-column: 1 / -1; }
-
-  .ly-gap-0 { --ly-gap: var(--ly-space-0); --ly-grid-gap: var(--ly-space-0); --ly-stack-gap: var(--ly-space-0); --ly-cluster-gap: var(--ly-space-0); }
-  .ly-gap-1 { --ly-gap: var(--ly-space-1); --ly-grid-gap: var(--ly-space-1); --ly-stack-gap: var(--ly-space-1); --ly-cluster-gap: var(--ly-space-1); }
-  .ly-gap-2 { --ly-gap: var(--ly-space-2); --ly-grid-gap: var(--ly-space-2); --ly-stack-gap: var(--ly-space-2); --ly-cluster-gap: var(--ly-space-2); }
-  .ly-gap-3 { --ly-gap: var(--ly-space-3); --ly-grid-gap: var(--ly-space-3); --ly-stack-gap: var(--ly-space-3); --ly-cluster-gap: var(--ly-space-3); }
-  .ly-gap-4 { --ly-gap: var(--ly-space-4); --ly-grid-gap: var(--ly-space-4); --ly-stack-gap: var(--ly-space-4); --ly-cluster-gap: var(--ly-space-4); }
-  .ly-gap-5 { --ly-gap: var(--ly-space-5); --ly-grid-gap: var(--ly-space-5); --ly-stack-gap: var(--ly-space-5); --ly-cluster-gap: var(--ly-space-5); }
-  .ly-gap-6 { --ly-gap: var(--ly-space-6); --ly-grid-gap: var(--ly-space-6); --ly-stack-gap: var(--ly-space-6); --ly-cluster-gap: var(--ly-space-6); }
-  .ly-gap-7 { --ly-gap: var(--ly-space-7); --ly-grid-gap: var(--ly-space-7); --ly-stack-gap: var(--ly-space-7); --ly-cluster-gap: var(--ly-space-7); }
-  .ly-gap-8 { --ly-gap: var(--ly-space-8); --ly-grid-gap: var(--ly-space-8); --ly-stack-gap: var(--ly-space-8); --ly-cluster-gap: var(--ly-space-8); }
-  .ly-gap-9 { --ly-gap: var(--ly-space-9); --ly-grid-gap: var(--ly-space-9); --ly-stack-gap: var(--ly-space-9); --ly-cluster-gap: var(--ly-space-9); }
-
-  .ly-pad-0 { padding: var(--ly-space-0); }
-  .ly-pad-1 { padding: var(--ly-space-1); }
-  .ly-pad-2 { padding: var(--ly-space-2); }
-  .ly-pad-3 { padding: var(--ly-space-3); }
-  .ly-pad-4 { padding: var(--ly-space-4); }
-  .ly-pad-5 { padding: var(--ly-space-5); }
-  .ly-pad-6 { padding: var(--ly-space-6); }
-  .ly-pad-7 { padding: var(--ly-space-7); }
-  .ly-pad-8 { padding: var(--ly-space-8); }
-  .ly-pad-9 { padding: var(--ly-space-9); }
-
-  .ly-px-4 { padding-inline: var(--ly-space-4); }
-  .ly-px-6 { padding-inline: var(--ly-space-6); }
-  .ly-px-8 { padding-inline: var(--ly-space-8); }
-  .ly-py-4 { padding-block: var(--ly-space-4); }
-  .ly-py-6 { padding-block: var(--ly-space-6); }
-  .ly-py-8 { padding-block: var(--ly-space-8); }
-
-  .ly-mx-auto { margin-inline: auto; }
-  .ly-w-full { inline-size: 100%; }
-  .ly-h-full { block-size: 100%; }
-  .ly-min-h-screen { min-block-size: 100svh; }
-  .ly-bleed { inline-size: 100vw; margin-inline: calc(50% - 50vw); }
-  .ly-overflow-auto { overflow: auto; }
-  .ly-overflow-hidden { overflow: hidden; }
-
-  .ly-items-start { align-items: flex-start; }
-  .ly-items-center { align-items: center; }
-  .ly-items-end { align-items: flex-end; }
-  .ly-items-stretch { align-items: stretch; }
-  .ly-justify-start { justify-content: flex-start; }
-  .ly-justify-center { justify-content: center; }
-  .ly-justify-end { justify-content: flex-end; }
-  .ly-justify-between { justify-content: space-between; }
-
-  .ly-frame-1x1 { --ly-frame-ratio: 1 / 1; }
-  .ly-frame-2x1 { --ly-frame-ratio: 2 / 1; }
-  .ly-frame-3x2 { --ly-frame-ratio: 3 / 2; }
-  .ly-frame-4x3 { --ly-frame-ratio: 4 / 3; }
-  .ly-frame-16x9 { --ly-frame-ratio: 16 / 9; }
-  .ly-frame-21x9 { --ly-frame-ratio: 21 / 9; }
-
-  .ly-hidden { display: none !important; }
-
-  .ly-show-md-up,
-  .ly-show-lg-up {
-    display: none !important;
-  }
-
-  .ly-visually-hidden {
-    position: absolute !important;
-    inline-size: 1px !important;
-    block-size: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    overflow: hidden !important;
-    clip: rect(0, 0, 0, 0) !important;
-    clip-path: inset(50%) !important;
-    white-space: nowrap !important;
-  }
-
-  /* Explicit escape hatches require consumers to verify focus and reading order. */
-  .ly-order-first { order: -1; }
-  .ly-order-normal { order: 0; }
-  .ly-order-last { order: 999; }
-  .ly-order-1 { order: 1; }
-  .ly-order-2 { order: 2; }
-  .ly-order-3 { order: 3; }
-  .ly-order-4 { order: 4; }
-  .ly-order-5 { order: 5; }
-  .ly-order-6 { order: 6; }
-
-  @container (min-width: 48rem) {
-    .ly-md-cols-1 { --ly-grid-columns: 1; }
-    .ly-md-cols-2 { --ly-grid-columns: 2; }
-    .ly-md-cols-3 { --ly-grid-columns: 3; }
-    .ly-md-cols-4 { --ly-grid-columns: 4; }
-    .ly-md-cols-6 { --ly-grid-columns: 6; }
-    .ly-md-cols-8 { --ly-grid-columns: 8; }
-    .ly-md-cols-12 { --ly-grid-columns: 12; }
-    .ly-md-cols-16 { --ly-grid-columns: 16; }
-    .ly-show-md-up { display: revert !important; }
-
-    .ly-md-order-first { order: -1; }
-    .ly-md-order-normal { order: 0; }
-    .ly-md-order-last { order: 999; }
-    .ly-md-order-1 { order: 1; }
-    .ly-md-order-2 { order: 2; }
-    .ly-md-order-3 { order: 3; }
-    .ly-md-order-4 { order: 4; }
-    .ly-md-order-5 { order: 5; }
-    .ly-md-order-6 { order: 6; }
-  }
-
-  @container (min-width: 64rem) {
-    .ly-lg-cols-1 { --ly-grid-columns: 1; }
-    .ly-lg-cols-2 { --ly-grid-columns: 2; }
-    .ly-lg-cols-3 { --ly-grid-columns: 3; }
-    .ly-lg-cols-4 { --ly-grid-columns: 4; }
-    .ly-lg-cols-6 { --ly-grid-columns: 6; }
-    .ly-lg-cols-8 { --ly-grid-columns: 8; }
-    .ly-lg-cols-12 { --ly-grid-columns: 12; }
-    .ly-lg-cols-16 { --ly-grid-columns: 16; }
-    .ly-show-lg-up { display: revert !important; }
-
-    .ly-lg-order-first { order: -1; }
-    .ly-lg-order-normal { order: 0; }
-    .ly-lg-order-last { order: 999; }
-    .ly-lg-order-1 { order: 1; }
-    .ly-lg-order-2 { order: 2; }
-    .ly-lg-order-3 { order: 3; }
-    .ly-lg-order-4 { order: 4; }
-    .ly-lg-order-5 { order: 5; }
-    .ly-lg-order-6 { order: 6; }
-  }
-}