@charset "UTF-8";
/**
 * Emersion Core Layer System
 * ==========================
 * Standalone SCSS project generating core-layer.css.
 *
 * Contains the framework's structural layer:
 *   - Tabler .modal neutralization
 *   - Window / Layer / Space / Desktop positioning & chrome
 *   - Sizing utilities (w-/h- percentages)
 *   - CSS Grid utilities (d-g, gtc-*, gtr-*)
 *   - Position helpers (pos-tl..pos-br)
 *
 * Layer order (declared in style.css index.scss):
 *   @layer tabler, core, components, utilities, changes;
 *
 * Tabler is @layer tabler (lowest priority).
 * Our structural rules go into @layer core (beats tabler).
 * Sizing/grid/position go into @layer utilities (beats core+components).
 * No !important needed anywhere — layer cascade handles everything.
 * Inline styles from JS (drag/resize/tiler) override all layers.
 */
@layer core {
  /* ================================================================
   * Tabler neutralization
   *
   * Tabler is now inside @layer tabler — our unlayered CSS always
   * wins by cascade. Only minimal overrides needed for edge cases.
   * ================================================================ */
  /* Bootstrap's .modal { display: none } must yield to our window system.
   * Since Tabler is layered, our unlayered rules win automatically.
   * But .d-n toggle still needs explicit handling. */
  .layer.window.modal:not(.d-n) {
    display: flex;
  }
  .layer.window.modal.d-n {
    display: none;
  }
  /* Reset Bootstrap's .modal positioning — our .layer handles it */
  .layer.window.modal {
    position: absolute;
    width: auto;
    height: auto;
    overflow: clip;
    padding: 0;
    margin: 0;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
  /* Inner wrapper */
  .layer.window .wrapper.space {
    margin: 0;
    pointer-events: auto;
  }
  /* Prevent Bootstrap backdrop */
  .modal-backdrop.show,
  .modal-backdrop.fade {
    display: none;
  }
  /* Tooltips must not block clicks */
  .tooltip {
    pointer-events: none;
  }
  /* Dropdown menus inside windows: the window has overflow:hidden,
   * so absolutely-positioned menus get clipped. Popper.js sets
   * position:absolute INLINE, so !important is the only way to
   * override it. position:fixed escapes the overflow container;
   * Popper still positions correctly via transform. */
  /* All dropdown menus in the admin need high z-index to appear above
   * windows (z-index 10000000+) and need position:fixed to escape
   * overflow:hidden containers. Popper.js sets position:absolute inline,
   * hence !important. */
  .dropdown-menu {
    position: fixed !important;
    z-index: 20000001 !important;
  }
  /* Offcanvas + backdrop must sit above windows AND splashscreen overlays.
   * Splashscreen gets dynamic z-index from getTopZIndex() — can exceed 20M.
   * Use near-max values to guarantee offcanvas is always on top. */
  .offcanvas-backdrop {
    z-index: 2147483645 !important;
  }
  .offcanvas {
    z-index: 2147483646 !important;
  }
  /* ================================================================
   * Layer — absolute-positioned container for windows
   * ================================================================ */
  /* Data view: target area for snippets */
  [data-view] {
    position: relative;
  }
  [data-type=inline] {
    display: inline;
  }
  [data-type=block] {
    display: block;
  }
  /* Layer — centered absolute window container */
  .layer {
    position: absolute;
    container-type: inline-size;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 55555;
  }
  .desktop {
    position: relative;
    overflow: clip;
  }
  .layer.max {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
  }
  /* Active desktop gets highest z-index */
  .desktop-top {
    z-index: 66666;
  }
  /* Resize handles (ix = interact.js) */
  .ix-edge,
  .ix-corner {
    position: absolute;
    z-index: 1;
  }
  .ix-edge--l {
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
  }
  .ix-edge--r {
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
  }
  .ix-edge--t {
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
  }
  .ix-edge--b {
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
  }
  .ix-corner--tl {
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
  }
  .ix-corner--tr {
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
  }
  .ix-corner--bl {
    bottom: 0;
    left: 0;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
  }
  .ix-corner--br {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
  }
  /* Keyboard-selection highlight for table rows */
  .is-kb-selected-row td {
    background: var(--selection-bg, rgba(255, 200, 60, 0.12)) !important;
  }
  /* ================================================================
   * Space — flex column that fills its parent window/layer
   * ================================================================ */
  .space {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .inset {
    padding: var(--inset, 1rem);
  }
  /* ================================================================
   * Bar — horizontal toolbar strip (header, footer, toolbars)
   * ================================================================ */
  .bar {
    display: flex;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    gap: 0.4rem;
    width: 100%;
    overflow-x: auto !important;
    align-items: center;
  }
  /* Content toolbar — more compact than desktop/window bars */
  .space:not(.tinymce) > .bar:not(.modal__bar--header):not(.modal__bar--footer) {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  /* Action button group (inline-flex row with gap) */
  .buttons {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    gap: 0.25rem;
  }
  /* Touch targets handled in tabler-migration-compat.css (unlayered, higher priority) */
  /* ================================================================
   * Modal (window) chrome — header bar, footer bar, title, visual
   * styling for the window frame. Uses CSS vars from _variables.scss
   * in the main SCSS project for colors.
   * ================================================================ */
  .modal {
    display: flex;
    background: radial-gradient(ellipse 80% 60% at 5% 95%, rgba(107, 58, 42, 0.05) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 95% 10%, rgba(60, 65, 75, 0.04) 0%, transparent 50%), linear-gradient(170deg, #f0ebe7 0%, #f3f4f6 40%, #eef0f2 100%);
    color: var(--modal-text, var(--text-app, #1f2937));
    border: var(--modal-border, 1px solid #e5e7eb);
    border-radius: 0.95rem;
    box-shadow: 0 0.75rem 2.2rem rgba(0, 0, 0, 0.15);
  }
  .modal.active {
    outline: none;
    box-shadow: 0 0.75rem 2.2rem rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(30, 41, 59, 0.15);
  }
  .bar.modal__bar--header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--modal-header-text, #f1f5f9);
    background: var(--modal-header-background, linear-gradient(180deg, #374151 0%, #2d3542 100%));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 0.5rem 0.75rem;
  }
  .bar.modal__bar--footer {
    border-top: 1px solid var(--modal-footer-border, #e2e8f0);
    color: var(--modal-footer-text, var(--text-app, #1f2937));
    background: var(--modal-footer-background, linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: 0.5rem 0.75rem;
  }
  .modal__title {
    color: var(--modal-header-text, #f9fafb);
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  /* Drag handle cursor */
  .draggable {
    cursor: grab;
  }
  .draggable:active {
    cursor: grabbing;
  }
  /* Drag handle for table rows */
  .drag-handle {
    display: inline-block;
    text-align: center;
    font-size: 1.3em;
    line-height: 1;
    color: var(--n12, #0a0f1a);
    cursor: grab;
    user-select: none;
  }
  /* ================================================================
   * Desktop — the main workspace container (header bar + screen + footer bar)
   * ================================================================ */
  .desktop {
    background: var(--modal-background, var(--bg-app, #f3f4f6));
    color: var(--modal-text, var(--text-app, #1f2937));
    border: var(--modal-border, 1px solid #e5e7eb);
    border-radius: 0.95rem;
    box-shadow: 0 0.75rem 2.2rem rgba(0, 0, 0, 0.15);
  }
  .bar.desktop__bar--header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--desktop-header-text, #f1f5f9);
    background: var(--desktop-header-background, linear-gradient(180deg, #2d333b 0%, #1e242c 100%));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 0.5rem 0.75rem;
  }
  .desktop__bar--header .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0%;
  }
  .brand-title {
    font-weight: 800;
    letter-spacing: 0.003em;
    line-height: 1.1;
    font-size: 18px;
    color: var(--p1, #fff8e1);
  }
  .brand-sub {
    opacity: 0.7;
    font-weight: 700;
    font-size: 13px;
    margin-top: -2px;
    display: block;
  }
  .bar.desktop__bar--footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--desktop-footer-text, #cbd5e1);
    background: var(--desktop-footer-background, linear-gradient(180deg, #1e242c 0%, #171c23 100%));
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0 0.75rem 0 0;
    font-size: 0.85rem;
  }
  /* Desktop tab switcher — bar icons for window switching.
   * Must disable native browser link drag so Sortable.js can handle
   * drag-to-reorder. Without this, dragging <a> elements starts the
   * browser's native link-drag (shows URL ghost) instead of Sortable. */
  .desktop-bar-switch .btn {
    width: 3em;
    height: 3em;
  }
  .desktop-bar-switch a {
    -webkit-user-drag: none;
    user-drag: none;
  }
  /* Desktop switch controls (round pill) */
  .controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  /* Desktop screen — multi-wave abstract wallpaper.
   * overflow:clip (not hidden!) prevents programmatic scroll triggered by
   * focus() calls (e.g., TinyMCE editor init focuses its iframe, browser
   * auto-scrolls the nearest scrollable ancestor to make it visible, shifting
   * all windows up by the scroll amount). clip = truly no scroll. */
  .desktop-screen.space {
    background: #eae5e1;
    position: relative;
    overflow: clip;
  }
  /* Horizontal wave — sweeps from bottom */
  .desktop-screen::before {
    content: "";
    position: absolute;
    pointer-events: none;
    left: -15%;
    right: -15%;
    top: 30%;
    height: 85%;
    background: rgba(0, 0, 0, 0.025);
    border-radius: 42% 58% 0 0/55% 45% 0 0;
    transform: rotate(-1.5deg);
    box-shadow: 0 -70px 0 -15px rgba(255, 255, 255, 0.12), 0 -140px 0 -35px rgba(255, 255, 255, 0.06);
  }
  /* Brand watermark — bottom right, organic shape */
  .desktop-screen .desktop-screen-watermark {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    user-select: none;
    padding: 2.5rem 2rem 0.8rem 4rem;
    text-align: right;
    color: rgba(60, 50, 45, 0.35);
    background: radial-gradient(ellipse 120% 140% at 100% 100%, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
    border-radius: 3rem 0 0 0;
  }
  .desktop-screen .desktop-screen-watermark__logo {
    display: block;
    width: 100px;
    height: auto;
    margin-left: auto;
  }
  .desktop-screen .desktop-screen-watermark span {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: 3px;
  }
  /* Vertical wave — sweeps from right side */
  .desktop-screen::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -20%;
    bottom: -20%;
    right: 5%;
    width: 60%;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 50% 50% 0/0 45% 55% 0;
    transform: rotate(3deg);
    box-shadow: 70px 0 0 -10px rgba(0, 0, 0, 0.02), 150px 0 0 -25px rgba(0, 0, 0, 0.015);
  }
  /* Clock display */
  .clock {
    font-variant-numeric: tabular-nums;
  }
  /* ================================================================
   * Drawer card — card layout used inside offcanvas drawers
   * ================================================================ */
  .drawer-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  }
  .drawer-card:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(24, 34, 56, 0.08);
    border-color: transparent;
    opacity: 0.9;
  }
  .drawer-card:focus-visible {
    outline: 3px solid #111827;
    outline-offset: 3px;
  }
  .drawer-card__icon {
    font-size: 2rem;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 10% 0%, #eff6ff, #e5e7eb);
    color: var(--primary, #1e293b);
  }
  .drawer-card__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .drawer-card__title {
    margin: 2px 0 4px;
    font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  .drawer-card__desc {
    margin: 0;
    color: #475467;
    font-size: 13.5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* ================================================================
   * Module card — Tabler card-link-pop variant for CMS dashboard
   *
   * Clickable: .card.card-link-pop (hover lifts + shadow)
   * Non-clickable: .card.card-inactive (dimmed, no pointer)
   *
   * Replaces old custom .module-card with Tabler-native cards.
   * ================================================================ */
  /* Card-link-pop gradient — subtle glassmorphism for clickable cards */
  .card.card-link-pop {
    background: radial-gradient(circle at 15% 50%, rgba(107, 58, 42, 0.06) 0%, transparent 50%), linear-gradient(to right, rgba(245, 238, 233, 0.9) 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.7) 70%, rgba(248, 246, 244, 0.85) 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s;
  }
  .card.card-link-pop:hover {
    background: radial-gradient(circle at 15% 50%, rgba(107, 58, 42, 0.1) 0%, transparent 50%), linear-gradient(to right, rgba(242, 233, 226, 0.95) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.85) 70%, rgba(250, 248, 246, 0.95) 100%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  /* Module card icon tile — colored square with FontAwesome icon */
  .module-tile {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: #fff;
    background: var(--tblr-secondary);
  }
  /* Backwards compat: old .module-card markup still works.
   * Override link color so card text stays dark (not --link orange). */
  a.module-card,
  a.module-card:hover,
  a.module-card:visited {
    text-decoration: none;
    color: inherit;
  }
  a.module-card h3 {
    color: var(--tblr-body-color, #1f2937);
  }
  a.module-card p {
    color: var(--tblr-secondary, #6b7280);
  }
  /* Card title & description inside module cards */
  .card .module-title,
  .module-card h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--tblr-body-color);
  }
  .card .module-desc,
  .module-card p {
    font-size: 0.8125rem;
    margin: 0;
    color: var(--tblr-secondary);
    line-height: 1.4;
  }
  /* Legacy .module-card — glassmorphism + enterprise polish.
   * Inspired by original Vít Štandał design: semi-transparent overlay
   * gradient with deep shadow, warm accent glow on hover. */
  .module-card {
    display: flex;
    align-items: flex-start;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 35%, rgba(0, 0, 0, 0.04) 60%, rgba(255, 255, 255, 0.6) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
    position: relative;
    overflow: hidden;
  }
  /* Accent shimmer line at top */
  .module-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(30, 41, 59, 0.06) 30%, rgba(30, 41, 59, 0.1) 50%, rgba(30, 41, 59, 0.06) 70%, transparent 100%);
    transition: background 0.3s, height 0.2s;
  }
  a.module-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.7) 35%, rgba(30, 41, 59, 0.03) 60%, rgba(255, 255, 255, 0.75) 100%);
    border-color: rgba(30, 41, 59, 0.12);
    box-shadow: 0 12px 32px rgba(30, 41, 59, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  a.module-card:hover::before {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(30, 41, 59, 0.6) 30%, rgba(30, 41, 59, 0.9) 50%, rgba(30, 41, 59, 0.6) 70%, transparent 100%);
  }
  a.module-card:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .module-card .meta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .module-card .tile {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: #fff;
    /* Default: warm mahogany — rich, distinct from grey chrome */
    background: linear-gradient(145deg, #7d4a38, #6b3a2a);
    box-shadow: 0 2px 6px rgba(107, 58, 42, 0.35), inset 0 1px 0 rgba(255, 200, 170, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  a.module-card:hover .tile {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(107, 58, 42, 0.4), inset 0 1px 0 rgba(255, 200, 170, 0.2);
  }
  /* Web switch cards: badge in corner */
  .module-card .pos-a {
    z-index: 1;
  }
}
@layer utilities {
  /* ================================================================
   * Sizing utilities — percentage widths & heights
   *
   * UNLAYERED, no !important — Tabler is in @layer tabler so our
   * rules win by cascade automatically. Inline styles from JS
   * (window drag/resize/tiler) override these as intended.
   * ================================================================ */
  .wl-sm {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-md {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-lg {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-xl {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .wl-xxl {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1em;
  }
  .w-1 {
    width: 1%;
  }
  .w-5 {
    width: 5%;
  }
  .w-10 {
    width: 10%;
  }
  .w-15 {
    width: 15%;
  }
  .w-20 {
    width: 20%;
  }
  .w-25 {
    width: 25%;
  }
  .w-30 {
    width: 30%;
  }
  .w-33 {
    width: 33.33333%;
  }
  .w-35 {
    width: 35%;
  }
  .w-40 {
    width: 40%;
  }
  .w-45 {
    width: 45%;
  }
  .w-50 {
    width: 50%;
  }
  .w-55 {
    width: 55%;
  }
  .w-60 {
    width: 60%;
  }
  .w-65 {
    width: 65%;
  }
  .w-66 {
    width: 66.66667%;
  }
  .w-70 {
    width: 70%;
  }
  .w-75 {
    width: 75%;
  }
  .w-80 {
    width: 80%;
  }
  .w-85 {
    width: 85%;
  }
  .w-90 {
    width: 90%;
  }
  .w-95 {
    width: 95%;
  }
  .w-100 {
    width: 100%;
  }
  .w-auto {
    width: auto;
  }
  .w-2b {
    width: 49%;
  }
  .w-3b {
    width: 32.3333%;
  }
  .w-4b {
    width: 24%;
  }
  .w-5b {
    width: 19%;
  }
  .w-6b {
    width: 15%;
  }
  .h-1 {
    height: 10%;
  }
  .h-10 {
    height: 10%;
  }
  .h-15 {
    height: 15%;
  }
  .h-20 {
    height: 20%;
  }
  .h-25 {
    height: 25%;
  }
  .h-30 {
    height: 30%;
  }
  .h-35 {
    height: 35%;
  }
  .h-40 {
    height: 40%;
  }
  .h-45 {
    height: 45%;
  }
  .h-50 {
    height: 50%;
  }
  .h-55 {
    height: 55%;
  }
  .h-60 {
    height: 60%;
  }
  .h-65 {
    height: 65%;
  }
  .h-70 {
    height: 70%;
  }
  .h-75 {
    height: 75%;
  }
  .h-80 {
    height: 80%;
  }
  .h-85 {
    height: 85%;
  }
  .h-90 {
    height: 90%;
  }
  .h-95 {
    height: 95%;
  }
  .h-100 {
    height: 100%;
  }
  .h-auto {
    height: auto;
  }
  .min-h-100 {
    min-height: 100%;
  }
  .vh-25 {
    height: 25vh;
  }
  .vh-50 {
    height: 50vh;
  }
  .vh-75 {
    height: 75vh;
  }
  .vh-100 {
    height: 100vh;
  }
  .min-vh-100 {
    min-height: 100vh;
  }
  .h-inherit {
    height: inherit;
  }
  .w {
    width: var(--w, auto);
  }
  .h {
    height: var(--h, auto);
  }
  .w-min {
    min-width: var(--w-min, 0);
  }
  .h-min {
    min-height: var(--h-min, 0);
  }
  .w-max {
    max-width: var(--w-max, none);
  }
  .h-max {
    max-height: var(--h-max, none);
  }
  @supports (container-type: inline-size) {
    @container (min-width: 992px) {
      .w-1 {
        width: 1%;
      }
      .w-5 {
        width: 5%;
      }
      .w-10 {
        width: 10%;
      }
      .w-15 {
        width: 15%;
      }
      .w-20 {
        width: 20%;
      }
      .w-25 {
        width: 25%;
      }
      .w-30 {
        width: 30%;
      }
      .w-33 {
        width: 33.33333%;
      }
      .w-35 {
        width: 35%;
      }
      .w-40 {
        width: 40%;
      }
      .w-45 {
        width: 45%;
      }
      .w-50 {
        width: 50%;
      }
      .w-55 {
        width: 55%;
      }
      .w-60 {
        width: 60%;
      }
      .w-65 {
        width: 65%;
      }
      .w-66 {
        width: 66.66667%;
      }
      .w-70 {
        width: 70%;
      }
      .w-75 {
        width: 75%;
      }
      .w-80 {
        width: 80%;
      }
      .w-85 {
        width: 85%;
      }
      .w-90 {
        width: 90%;
      }
      .w-95 {
        width: 95%;
      }
      .w-100 {
        width: 100%;
      }
      .w-auto {
        width: auto;
      }
      .w-2b {
        width: 49%;
      }
      .w-3b {
        width: 32.3333%;
      }
      .w-4b {
        width: 24%;
      }
      .w-5b {
        width: 19%;
      }
      .w-6b {
        width: 15%;
      }
      .h-1 {
        height: 10%;
      }
      .h-10 {
        height: 10%;
      }
      .h-15 {
        height: 15%;
      }
      .h-20 {
        height: 20%;
      }
      .h-25 {
        height: 25%;
      }
      .h-30 {
        height: 30%;
      }
      .h-35 {
        height: 35%;
      }
      .h-40 {
        height: 40%;
      }
      .h-45 {
        height: 45%;
      }
      .h-50 {
        height: 50%;
      }
      .h-55 {
        height: 55%;
      }
      .h-60 {
        height: 60%;
      }
      .h-65 {
        height: 65%;
      }
      .h-70 {
        height: 70%;
      }
      .h-75 {
        height: 75%;
      }
      .h-80 {
        height: 80%;
      }
      .h-85 {
        height: 85%;
      }
      .h-90 {
        height: 90%;
      }
      .h-95 {
        height: 95%;
      }
      .h-100 {
        height: 100%;
      }
      .h-auto {
        height: auto;
      }
      .min-h-100 {
        min-height: 100%;
      }
      .vh-25 {
        height: 25vh;
      }
      .vh-50 {
        height: 50vh;
      }
      .vh-75 {
        height: 75vh;
      }
      .vh-100 {
        height: 100vh;
      }
      .min-vh-100 {
        min-height: 100vh;
      }
      .h-inherit {
        height: inherit;
      }
      .w {
        width: var(--w, auto);
      }
      .h {
        height: var(--h, auto);
      }
      .w-min {
        min-width: var(--w-min, 0);
      }
      .h-min {
        min-height: var(--h-min, 0);
      }
      .w-max {
        max-width: var(--w-max, none);
      }
      .h-max {
        max-height: var(--h-max, none);
      }
    }
  }
  @media screen and (max-width: 767px) {
    .w-1-sm {
      width: 1%;
    }
    .w-5-sm {
      width: 5%;
    }
    .w-10-sm {
      width: 10%;
    }
    .w-15-sm {
      width: 15%;
    }
    .w-20-sm {
      width: 20%;
    }
    .w-25-sm {
      width: 25%;
    }
    .w-30-sm {
      width: 30%;
    }
    .w-33-sm {
      width: 33.33333%;
    }
    .w-35-sm {
      width: 35%;
    }
    .w-40-sm {
      width: 40%;
    }
    .w-45-sm {
      width: 45%;
    }
    .w-50-sm {
      width: 50%;
    }
    .w-55-sm {
      width: 55%;
    }
    .w-60-sm {
      width: 60%;
    }
    .w-65-sm {
      width: 65%;
    }
    .w-66-sm {
      width: 66.66667%;
    }
    .w-70-sm {
      width: 70%;
    }
    .w-75-sm {
      width: 75%;
    }
    .w-80-sm {
      width: 80%;
    }
    .w-85-sm {
      width: 85%;
    }
    .w-90-sm {
      width: 90%;
    }
    .w-95-sm {
      width: 95%;
    }
    .w-100-sm {
      width: 100%;
    }
    .w-auto-sm {
      width: auto;
    }
    .w-2b-sm {
      width: 49%;
    }
    .w-3b-sm {
      width: 32.3333%;
    }
    .w-4b-sm {
      width: 24%;
    }
    .w-5b-sm {
      width: 19%;
    }
    .w-6b-sm {
      width: 15%;
    }
    .h-1-sm {
      height: 10%;
    }
    .h-10-sm {
      height: 10%;
    }
    .h-15-sm {
      height: 15%;
    }
    .h-20-sm {
      height: 20%;
    }
    .h-25-sm {
      height: 25%;
    }
    .h-30-sm {
      height: 30%;
    }
    .h-35-sm {
      height: 35%;
    }
    .h-40-sm {
      height: 40%;
    }
    .h-45-sm {
      height: 45%;
    }
    .h-50-sm {
      height: 50%;
    }
    .h-55-sm {
      height: 55%;
    }
    .h-60-sm {
      height: 60%;
    }
    .h-65-sm {
      height: 65%;
    }
    .h-70-sm {
      height: 70%;
    }
    .h-75-sm {
      height: 75%;
    }
    .h-80-sm {
      height: 80%;
    }
    .h-85-sm {
      height: 85%;
    }
    .h-90-sm {
      height: 90%;
    }
    .h-95-sm {
      height: 95%;
    }
    .h-100-sm {
      height: 100%;
    }
    .h-auto-sm {
      height: auto;
    }
    .min-h-100-sm {
      min-height: 100%;
    }
    .vh-25-sm {
      height: 25vh;
    }
    .vh-50-sm {
      height: 50vh;
    }
    .vh-75-sm {
      height: 75vh;
    }
    .vh-100-sm {
      height: 100vh;
    }
    .min-vh-100-sm {
      min-height: 100vh;
    }
    .h-inherit-sm {
      height: inherit;
    }
    .w-sm {
      width: var(--w-sm, auto);
    }
    .h-sm {
      height: var(--h-sm, auto);
    }
    .w-min-sm {
      min-width: var(--w-min-sm, 0);
    }
    .h-min-sm {
      min-height: var(--h-min-sm, 0);
    }
    .w-max-sm {
      max-width: var(--w-max-sm, none);
    }
    .h-max-sm {
      max-height: var(--h-max-sm, none);
    }
  }
  @supports (container-type: inline-size) {
    @container (max-width: 767px) {
      .w-1-sm {
        width: 1%;
      }
      .w-5-sm {
        width: 5%;
      }
      .w-10-sm {
        width: 10%;
      }
      .w-15-sm {
        width: 15%;
      }
      .w-20-sm {
        width: 20%;
      }
      .w-25-sm {
        width: 25%;
      }
      .w-30-sm {
        width: 30%;
      }
      .w-33-sm {
        width: 33.33333%;
      }
      .w-35-sm {
        width: 35%;
      }
      .w-40-sm {
        width: 40%;
      }
      .w-45-sm {
        width: 45%;
      }
      .w-50-sm {
        width: 50%;
      }
      .w-55-sm {
        width: 55%;
      }
      .w-60-sm {
        width: 60%;
      }
      .w-65-sm {
        width: 65%;
      }
      .w-66-sm {
        width: 66.66667%;
      }
      .w-70-sm {
        width: 70%;
      }
      .w-75-sm {
        width: 75%;
      }
      .w-80-sm {
        width: 80%;
      }
      .w-85-sm {
        width: 85%;
      }
      .w-90-sm {
        width: 90%;
      }
      .w-95-sm {
        width: 95%;
      }
      .w-100-sm {
        width: 100%;
      }
      .w-auto-sm {
        width: auto;
      }
      .w-2b-sm {
        width: 49%;
      }
      .w-3b-sm {
        width: 32.3333%;
      }
      .w-4b-sm {
        width: 24%;
      }
      .w-5b-sm {
        width: 19%;
      }
      .w-6b-sm {
        width: 15%;
      }
      .h-1-sm {
        height: 10%;
      }
      .h-10-sm {
        height: 10%;
      }
      .h-15-sm {
        height: 15%;
      }
      .h-20-sm {
        height: 20%;
      }
      .h-25-sm {
        height: 25%;
      }
      .h-30-sm {
        height: 30%;
      }
      .h-35-sm {
        height: 35%;
      }
      .h-40-sm {
        height: 40%;
      }
      .h-45-sm {
        height: 45%;
      }
      .h-50-sm {
        height: 50%;
      }
      .h-55-sm {
        height: 55%;
      }
      .h-60-sm {
        height: 60%;
      }
      .h-65-sm {
        height: 65%;
      }
      .h-70-sm {
        height: 70%;
      }
      .h-75-sm {
        height: 75%;
      }
      .h-80-sm {
        height: 80%;
      }
      .h-85-sm {
        height: 85%;
      }
      .h-90-sm {
        height: 90%;
      }
      .h-95-sm {
        height: 95%;
      }
      .h-100-sm {
        height: 100%;
      }
      .h-auto-sm {
        height: auto;
      }
      .min-h-100-sm {
        min-height: 100%;
      }
      .vh-25-sm {
        height: 25vh;
      }
      .vh-50-sm {
        height: 50vh;
      }
      .vh-75-sm {
        height: 75vh;
      }
      .vh-100-sm {
        height: 100vh;
      }
      .min-vh-100-sm {
        min-height: 100vh;
      }
      .h-inherit-sm {
        height: inherit;
      }
      .w-sm {
        width: var(--w-sm, auto);
      }
      .h-sm {
        height: var(--h-sm, auto);
      }
      .w-min-sm {
        min-width: var(--w-min-sm, 0);
      }
      .h-min-sm {
        min-height: var(--h-min-sm, 0);
      }
      .w-max-sm {
        max-width: var(--w-max-sm, none);
      }
      .h-max-sm {
        max-height: var(--h-max-sm, none);
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .w-1-md {
      width: 1%;
    }
    .w-5-md {
      width: 5%;
    }
    .w-10-md {
      width: 10%;
    }
    .w-15-md {
      width: 15%;
    }
    .w-20-md {
      width: 20%;
    }
    .w-25-md {
      width: 25%;
    }
    .w-30-md {
      width: 30%;
    }
    .w-33-md {
      width: 33.33333%;
    }
    .w-35-md {
      width: 35%;
    }
    .w-40-md {
      width: 40%;
    }
    .w-45-md {
      width: 45%;
    }
    .w-50-md {
      width: 50%;
    }
    .w-55-md {
      width: 55%;
    }
    .w-60-md {
      width: 60%;
    }
    .w-65-md {
      width: 65%;
    }
    .w-66-md {
      width: 66.66667%;
    }
    .w-70-md {
      width: 70%;
    }
    .w-75-md {
      width: 75%;
    }
    .w-80-md {
      width: 80%;
    }
    .w-85-md {
      width: 85%;
    }
    .w-90-md {
      width: 90%;
    }
    .w-95-md {
      width: 95%;
    }
    .w-100-md {
      width: 100%;
    }
    .w-auto-md {
      width: auto;
    }
    .w-2b-md {
      width: 49%;
    }
    .w-3b-md {
      width: 32.3333%;
    }
    .w-4b-md {
      width: 24%;
    }
    .w-5b-md {
      width: 19%;
    }
    .w-6b-md {
      width: 15%;
    }
    .h-1-md {
      height: 10%;
    }
    .h-10-md {
      height: 10%;
    }
    .h-15-md {
      height: 15%;
    }
    .h-20-md {
      height: 20%;
    }
    .h-25-md {
      height: 25%;
    }
    .h-30-md {
      height: 30%;
    }
    .h-35-md {
      height: 35%;
    }
    .h-40-md {
      height: 40%;
    }
    .h-45-md {
      height: 45%;
    }
    .h-50-md {
      height: 50%;
    }
    .h-55-md {
      height: 55%;
    }
    .h-60-md {
      height: 60%;
    }
    .h-65-md {
      height: 65%;
    }
    .h-70-md {
      height: 70%;
    }
    .h-75-md {
      height: 75%;
    }
    .h-80-md {
      height: 80%;
    }
    .h-85-md {
      height: 85%;
    }
    .h-90-md {
      height: 90%;
    }
    .h-95-md {
      height: 95%;
    }
    .h-100-md {
      height: 100%;
    }
    .h-auto-md {
      height: auto;
    }
    .min-h-100-md {
      min-height: 100%;
    }
    .vh-25-md {
      height: 25vh;
    }
    .vh-50-md {
      height: 50vh;
    }
    .vh-75-md {
      height: 75vh;
    }
    .vh-100-md {
      height: 100vh;
    }
    .min-vh-100-md {
      min-height: 100vh;
    }
    .h-inherit-md {
      height: inherit;
    }
    .w-md {
      width: var(--w-md, auto);
    }
    .h-md {
      height: var(--h-md, auto);
    }
    .w-min-md {
      min-width: var(--w-min-md, 0);
    }
    .h-min-md {
      min-height: var(--h-min-md, 0);
    }
    .w-max-md {
      max-width: var(--w-max-md, none);
    }
    .h-max-md {
      max-height: var(--h-max-md, none);
    }
  }
  @supports (container-type: inline-size) {
    @container (min-width: 768px) and (max-width: 991px) {
      .w-1-md {
        width: 1%;
      }
      .w-5-md {
        width: 5%;
      }
      .w-10-md {
        width: 10%;
      }
      .w-15-md {
        width: 15%;
      }
      .w-20-md {
        width: 20%;
      }
      .w-25-md {
        width: 25%;
      }
      .w-30-md {
        width: 30%;
      }
      .w-33-md {
        width: 33.33333%;
      }
      .w-35-md {
        width: 35%;
      }
      .w-40-md {
        width: 40%;
      }
      .w-45-md {
        width: 45%;
      }
      .w-50-md {
        width: 50%;
      }
      .w-55-md {
        width: 55%;
      }
      .w-60-md {
        width: 60%;
      }
      .w-65-md {
        width: 65%;
      }
      .w-66-md {
        width: 66.66667%;
      }
      .w-70-md {
        width: 70%;
      }
      .w-75-md {
        width: 75%;
      }
      .w-80-md {
        width: 80%;
      }
      .w-85-md {
        width: 85%;
      }
      .w-90-md {
        width: 90%;
      }
      .w-95-md {
        width: 95%;
      }
      .w-100-md {
        width: 100%;
      }
      .w-auto-md {
        width: auto;
      }
      .w-2b-md {
        width: 49%;
      }
      .w-3b-md {
        width: 32.3333%;
      }
      .w-4b-md {
        width: 24%;
      }
      .w-5b-md {
        width: 19%;
      }
      .w-6b-md {
        width: 15%;
      }
      .h-1-md {
        height: 10%;
      }
      .h-10-md {
        height: 10%;
      }
      .h-15-md {
        height: 15%;
      }
      .h-20-md {
        height: 20%;
      }
      .h-25-md {
        height: 25%;
      }
      .h-30-md {
        height: 30%;
      }
      .h-35-md {
        height: 35%;
      }
      .h-40-md {
        height: 40%;
      }
      .h-45-md {
        height: 45%;
      }
      .h-50-md {
        height: 50%;
      }
      .h-55-md {
        height: 55%;
      }
      .h-60-md {
        height: 60%;
      }
      .h-65-md {
        height: 65%;
      }
      .h-70-md {
        height: 70%;
      }
      .h-75-md {
        height: 75%;
      }
      .h-80-md {
        height: 80%;
      }
      .h-85-md {
        height: 85%;
      }
      .h-90-md {
        height: 90%;
      }
      .h-95-md {
        height: 95%;
      }
      .h-100-md {
        height: 100%;
      }
      .h-auto-md {
        height: auto;
      }
      .min-h-100-md {
        min-height: 100%;
      }
      .vh-25-md {
        height: 25vh;
      }
      .vh-50-md {
        height: 50vh;
      }
      .vh-75-md {
        height: 75vh;
      }
      .vh-100-md {
        height: 100vh;
      }
      .min-vh-100-md {
        min-height: 100vh;
      }
      .h-inherit-md {
        height: inherit;
      }
      .w-md {
        width: var(--w-md, auto);
      }
      .h-md {
        height: var(--h-md, auto);
      }
      .w-min-md {
        min-width: var(--w-min-md, 0);
      }
      .h-min-md {
        min-height: var(--h-min-md, 0);
      }
      .w-max-md {
        max-width: var(--w-max-md, none);
      }
      .h-max-md {
        max-height: var(--h-max-md, none);
      }
    }
  }
  /* ================================================================
   * CSS Grid utilities — template columns, rows, gap
   * ================================================================ */
  .gtc-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .gtc-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .gtc-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gtc-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .gtc-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gtc-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .gtc-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .gtc-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .gtc-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .gtr-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .gtr-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .gtr-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .gtr-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .gtr-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .gtr-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .gtr-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .gtr-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .gtr-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .gtr-a1 {
    grid-template-rows: auto 1fr;
  }
  .gtr-a1a {
    grid-template-rows: auto 1fr auto;
  }
  .gtr-1a1 {
    grid-template-rows: 1fr auto 1fr;
  }
  .gtr-a2a {
    grid-template-rows: auto 1fr 1fr auto;
  }
  .gtr-2a1 {
    grid-template-rows: 1fr 1fr auto;
  }
  .gtr-1a2 {
    grid-template-rows: 1fr auto 1fr 1fr;
  }
  .gtr-a1a1 {
    grid-template-rows: auto 1fr auto 1fr;
  }
  .gtr-a1a1a {
    grid-template-rows: auto 1fr auto 1fr auto;
  }
  .gtc {
    grid-template-columns: var(--gtc);
  }
  .gtr {
    grid-template-rows: var(--gtr);
  }
  .gap-0 {
    gap: 0;
  }
  .gap-1 {
    gap: 0.25em;
  }
  .gap-2 {
    gap: 0.5em;
  }
  .gap-3 {
    gap: 0.75em;
  }
  .gap-4 {
    gap: 1em;
  }
  .gap-5 {
    gap: 1.5em;
  }
  .gap-6 {
    gap: 2em;
  }
  .gap-7 {
    gap: 2.5em;
  }
  .gap-8 {
    gap: 3em;
  }
  .gap-9 {
    gap: 3.5em;
  }
  .gap-10 {
    gap: 4em;
  }
  .gtc-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .gtc-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .gtc-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gtc-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .gtc-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gtc-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .gtc-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .gtc-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .gtc-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .gtr-1 {
    grid-template-rows: repeat(1, 1fr);
  }
  .gtr-2 {
    grid-template-rows: repeat(2, 1fr);
  }
  .gtr-3 {
    grid-template-rows: repeat(3, 1fr);
  }
  .gtr-4 {
    grid-template-rows: repeat(4, 1fr);
  }
  .gtr-5 {
    grid-template-rows: repeat(5, 1fr);
  }
  .gtr-6 {
    grid-template-rows: repeat(6, 1fr);
  }
  .gtr-7 {
    grid-template-rows: repeat(7, 1fr);
  }
  .gtr-8 {
    grid-template-rows: repeat(8, 1fr);
  }
  .gtr-9 {
    grid-template-rows: repeat(9, 1fr);
  }
  .gtr-a1 {
    grid-template-rows: auto 1fr;
  }
  .gtr-a1a {
    grid-template-rows: auto 1fr auto;
  }
  .gtr-1a1 {
    grid-template-rows: 1fr auto 1fr;
  }
  .gtr-a2a {
    grid-template-rows: auto 1fr 1fr auto;
  }
  .gtr-2a1 {
    grid-template-rows: 1fr 1fr auto;
  }
  .gtr-1a2 {
    grid-template-rows: 1fr auto 1fr 1fr;
  }
  .gtr-a1a1 {
    grid-template-rows: auto 1fr auto 1fr;
  }
  .gtr-a1a1a {
    grid-template-rows: auto 1fr auto 1fr auto;
  }
  .gtc {
    grid-template-columns: var(--gtc);
  }
  .gtr {
    grid-template-rows: var(--gtr);
  }
  @supports (container-type: inline-size) {
    @container (min-width: 992px) {
      .gtc-1 {
        grid-template-columns: repeat(1, 1fr);
      }
      .gtc-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .gtc-3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .gtc-4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .gtc-5 {
        grid-template-columns: repeat(5, 1fr);
      }
      .gtc-6 {
        grid-template-columns: repeat(6, 1fr);
      }
      .gtc-7 {
        grid-template-columns: repeat(7, 1fr);
      }
      .gtc-8 {
        grid-template-columns: repeat(8, 1fr);
      }
      .gtc-9 {
        grid-template-columns: repeat(9, 1fr);
      }
      .gtr-1 {
        grid-template-rows: repeat(1, 1fr);
      }
      .gtr-2 {
        grid-template-rows: repeat(2, 1fr);
      }
      .gtr-3 {
        grid-template-rows: repeat(3, 1fr);
      }
      .gtr-4 {
        grid-template-rows: repeat(4, 1fr);
      }
      .gtr-5 {
        grid-template-rows: repeat(5, 1fr);
      }
      .gtr-6 {
        grid-template-rows: repeat(6, 1fr);
      }
      .gtr-7 {
        grid-template-rows: repeat(7, 1fr);
      }
      .gtr-8 {
        grid-template-rows: repeat(8, 1fr);
      }
      .gtr-9 {
        grid-template-rows: repeat(9, 1fr);
      }
      .gtr-a1 {
        grid-template-rows: auto 1fr;
      }
      .gtr-a1a {
        grid-template-rows: auto 1fr auto;
      }
      .gtr-1a1 {
        grid-template-rows: 1fr auto 1fr;
      }
      .gtr-a2a {
        grid-template-rows: auto 1fr 1fr auto;
      }
      .gtr-2a1 {
        grid-template-rows: 1fr 1fr auto;
      }
      .gtr-1a2 {
        grid-template-rows: 1fr auto 1fr 1fr;
      }
      .gtr-a1a1 {
        grid-template-rows: auto 1fr auto 1fr;
      }
      .gtr-a1a1a {
        grid-template-rows: auto 1fr auto 1fr auto;
      }
      .gtc {
        grid-template-columns: var(--gtc);
      }
      .gtr {
        grid-template-rows: var(--gtr);
      }
    }
  }
  @media screen and (max-width: 767px) {
    .gtc-1-sm {
      grid-template-columns: repeat(1, 1fr);
    }
    .gtc-2-sm {
      grid-template-columns: repeat(2, 1fr);
    }
    .gtc-3-sm {
      grid-template-columns: repeat(3, 1fr);
    }
    .gtc-4-sm {
      grid-template-columns: repeat(4, 1fr);
    }
    .gtc-5-sm {
      grid-template-columns: repeat(5, 1fr);
    }
    .gtc-6-sm {
      grid-template-columns: repeat(6, 1fr);
    }
    .gtc-7-sm {
      grid-template-columns: repeat(7, 1fr);
    }
    .gtc-8-sm {
      grid-template-columns: repeat(8, 1fr);
    }
    .gtc-9-sm {
      grid-template-columns: repeat(9, 1fr);
    }
    .gtr-1-sm {
      grid-template-rows: repeat(1, 1fr);
    }
    .gtr-2-sm {
      grid-template-rows: repeat(2, 1fr);
    }
    .gtr-3-sm {
      grid-template-rows: repeat(3, 1fr);
    }
    .gtr-4-sm {
      grid-template-rows: repeat(4, 1fr);
    }
    .gtr-5-sm {
      grid-template-rows: repeat(5, 1fr);
    }
    .gtr-6-sm {
      grid-template-rows: repeat(6, 1fr);
    }
    .gtr-7-sm {
      grid-template-rows: repeat(7, 1fr);
    }
    .gtr-8-sm {
      grid-template-rows: repeat(8, 1fr);
    }
    .gtr-9-sm {
      grid-template-rows: repeat(9, 1fr);
    }
    .gtr-a1-sm {
      grid-template-rows: auto 1fr;
    }
    .gtr-a1a-sm {
      grid-template-rows: auto 1fr auto;
    }
    .gtr-1a1-sm {
      grid-template-rows: 1fr auto 1fr;
    }
    .gtr-a2a-sm {
      grid-template-rows: auto 1fr 1fr auto;
    }
    .gtr-2a1-sm {
      grid-template-rows: 1fr 1fr auto;
    }
    .gtr-1a2-sm {
      grid-template-rows: 1fr auto 1fr 1fr;
    }
    .gtr-a1a1-sm {
      grid-template-rows: auto 1fr auto 1fr;
    }
    .gtr-a1a1a-sm {
      grid-template-rows: auto 1fr auto 1fr auto;
    }
    .gtc-sm {
      grid-template-columns: var(--gtc-sm);
    }
    .gtr-sm {
      grid-template-rows: var(--gtr-sm);
    }
  }
  @supports (container-type: inline-size) {
    @container (max-width: 767px) {
      .gtc-1-sm {
        grid-template-columns: repeat(1, 1fr);
      }
      .gtc-2-sm {
        grid-template-columns: repeat(2, 1fr);
      }
      .gtc-3-sm {
        grid-template-columns: repeat(3, 1fr);
      }
      .gtc-4-sm {
        grid-template-columns: repeat(4, 1fr);
      }
      .gtc-5-sm {
        grid-template-columns: repeat(5, 1fr);
      }
      .gtc-6-sm {
        grid-template-columns: repeat(6, 1fr);
      }
      .gtc-7-sm {
        grid-template-columns: repeat(7, 1fr);
      }
      .gtc-8-sm {
        grid-template-columns: repeat(8, 1fr);
      }
      .gtc-9-sm {
        grid-template-columns: repeat(9, 1fr);
      }
      .gtr-1-sm {
        grid-template-rows: repeat(1, 1fr);
      }
      .gtr-2-sm {
        grid-template-rows: repeat(2, 1fr);
      }
      .gtr-3-sm {
        grid-template-rows: repeat(3, 1fr);
      }
      .gtr-4-sm {
        grid-template-rows: repeat(4, 1fr);
      }
      .gtr-5-sm {
        grid-template-rows: repeat(5, 1fr);
      }
      .gtr-6-sm {
        grid-template-rows: repeat(6, 1fr);
      }
      .gtr-7-sm {
        grid-template-rows: repeat(7, 1fr);
      }
      .gtr-8-sm {
        grid-template-rows: repeat(8, 1fr);
      }
      .gtr-9-sm {
        grid-template-rows: repeat(9, 1fr);
      }
      .gtr-a1-sm {
        grid-template-rows: auto 1fr;
      }
      .gtr-a1a-sm {
        grid-template-rows: auto 1fr auto;
      }
      .gtr-1a1-sm {
        grid-template-rows: 1fr auto 1fr;
      }
      .gtr-a2a-sm {
        grid-template-rows: auto 1fr 1fr auto;
      }
      .gtr-2a1-sm {
        grid-template-rows: 1fr 1fr auto;
      }
      .gtr-1a2-sm {
        grid-template-rows: 1fr auto 1fr 1fr;
      }
      .gtr-a1a1-sm {
        grid-template-rows: auto 1fr auto 1fr;
      }
      .gtr-a1a1a-sm {
        grid-template-rows: auto 1fr auto 1fr auto;
      }
      .gtc-sm {
        grid-template-columns: var(--gtc-sm);
      }
      .gtr-sm {
        grid-template-rows: var(--gtr-sm);
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .gtc-1-md {
      grid-template-columns: repeat(1, 1fr);
    }
    .gtc-2-md {
      grid-template-columns: repeat(2, 1fr);
    }
    .gtc-3-md {
      grid-template-columns: repeat(3, 1fr);
    }
    .gtc-4-md {
      grid-template-columns: repeat(4, 1fr);
    }
    .gtc-5-md {
      grid-template-columns: repeat(5, 1fr);
    }
    .gtc-6-md {
      grid-template-columns: repeat(6, 1fr);
    }
    .gtc-7-md {
      grid-template-columns: repeat(7, 1fr);
    }
    .gtc-8-md {
      grid-template-columns: repeat(8, 1fr);
    }
    .gtc-9-md {
      grid-template-columns: repeat(9, 1fr);
    }
    .gtr-1-md {
      grid-template-rows: repeat(1, 1fr);
    }
    .gtr-2-md {
      grid-template-rows: repeat(2, 1fr);
    }
    .gtr-3-md {
      grid-template-rows: repeat(3, 1fr);
    }
    .gtr-4-md {
      grid-template-rows: repeat(4, 1fr);
    }
    .gtr-5-md {
      grid-template-rows: repeat(5, 1fr);
    }
    .gtr-6-md {
      grid-template-rows: repeat(6, 1fr);
    }
    .gtr-7-md {
      grid-template-rows: repeat(7, 1fr);
    }
    .gtr-8-md {
      grid-template-rows: repeat(8, 1fr);
    }
    .gtr-9-md {
      grid-template-rows: repeat(9, 1fr);
    }
    .gtr-a1-md {
      grid-template-rows: auto 1fr;
    }
    .gtr-a1a-md {
      grid-template-rows: auto 1fr auto;
    }
    .gtr-1a1-md {
      grid-template-rows: 1fr auto 1fr;
    }
    .gtr-a2a-md {
      grid-template-rows: auto 1fr 1fr auto;
    }
    .gtr-2a1-md {
      grid-template-rows: 1fr 1fr auto;
    }
    .gtr-1a2-md {
      grid-template-rows: 1fr auto 1fr 1fr;
    }
    .gtr-a1a1-md {
      grid-template-rows: auto 1fr auto 1fr;
    }
    .gtr-a1a1a-md {
      grid-template-rows: auto 1fr auto 1fr auto;
    }
    .gtc-md {
      grid-template-columns: var(--gtc-md);
    }
    .gtr-md {
      grid-template-rows: var(--gtr-md);
    }
  }
  @supports (container-type: inline-size) {
    @container (min-width: 768px) and (max-width: 991px) {
      .gtc-1-md {
        grid-template-columns: repeat(1, 1fr);
      }
      .gtc-2-md {
        grid-template-columns: repeat(2, 1fr);
      }
      .gtc-3-md {
        grid-template-columns: repeat(3, 1fr);
      }
      .gtc-4-md {
        grid-template-columns: repeat(4, 1fr);
      }
      .gtc-5-md {
        grid-template-columns: repeat(5, 1fr);
      }
      .gtc-6-md {
        grid-template-columns: repeat(6, 1fr);
      }
      .gtc-7-md {
        grid-template-columns: repeat(7, 1fr);
      }
      .gtc-8-md {
        grid-template-columns: repeat(8, 1fr);
      }
      .gtc-9-md {
        grid-template-columns: repeat(9, 1fr);
      }
      .gtr-1-md {
        grid-template-rows: repeat(1, 1fr);
      }
      .gtr-2-md {
        grid-template-rows: repeat(2, 1fr);
      }
      .gtr-3-md {
        grid-template-rows: repeat(3, 1fr);
      }
      .gtr-4-md {
        grid-template-rows: repeat(4, 1fr);
      }
      .gtr-5-md {
        grid-template-rows: repeat(5, 1fr);
      }
      .gtr-6-md {
        grid-template-rows: repeat(6, 1fr);
      }
      .gtr-7-md {
        grid-template-rows: repeat(7, 1fr);
      }
      .gtr-8-md {
        grid-template-rows: repeat(8, 1fr);
      }
      .gtr-9-md {
        grid-template-rows: repeat(9, 1fr);
      }
      .gtr-a1-md {
        grid-template-rows: auto 1fr;
      }
      .gtr-a1a-md {
        grid-template-rows: auto 1fr auto;
      }
      .gtr-1a1-md {
        grid-template-rows: 1fr auto 1fr;
      }
      .gtr-a2a-md {
        grid-template-rows: auto 1fr 1fr auto;
      }
      .gtr-2a1-md {
        grid-template-rows: 1fr 1fr auto;
      }
      .gtr-1a2-md {
        grid-template-rows: 1fr auto 1fr 1fr;
      }
      .gtr-a1a1-md {
        grid-template-rows: auto 1fr auto 1fr;
      }
      .gtr-a1a1a-md {
        grid-template-rows: auto 1fr auto 1fr auto;
      }
      .gtc-md {
        grid-template-columns: var(--gtc-md);
      }
      .gtr-md {
        grid-template-rows: var(--gtr-md);
      }
    }
  }
  /* ================================================================
   * Position helpers — absolute positioning grid + position types
   * ================================================================ */
  .pos-s {
    position: static;
  }
  .pos-r {
    position: relative;
  }
  .pos-a {
    position: absolute;
  }
  .pos-f {
    position: fixed;
  }
  .top-0 {
    top: 0;
  }
  .top-50 {
    top: 50%;
  }
  .top-100 {
    top: 100%;
  }
  .bottom {
    bottom: 0;
  }
  .bottom-50 {
    bottom: 50%;
  }
  .bottom-100 {
    bottom: 100%;
  }
  .left-0 {
    left: 0;
  }
  .left-50 {
    left: 50%;
  }
  .left-100 {
    left: 100%;
  }
  .right-0 {
    right: 0;
  }
  .right-50 {
    right: 50%;
  }
  .right-100 {
    right: 100%;
  }
  .trf-m {
    transform: translate(-50%, -50%);
  }
  .trf-m-x {
    transform: translateX(-50%);
  }
  .trf-m-y {
    transform: translateY(-50%);
  }
  .pos-tl {
    top: 0;
    left: 0;
    transform: translate(0, 0);
  }
  .pos-tc {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .pos-tr {
    top: 0;
    left: 100%;
    transform: translate(-100%, 0);
  }
  .pos-ml {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }
  .pos-mc {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .pos-mr {
    top: 50%;
    left: 100%;
    transform: translate(-100%, -50%);
  }
  .pos-bl {
    top: 100%;
    left: 0;
    transform: translate(0, -100%);
  }
  .pos-bc {
    top: 100%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  .pos-br {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }
  .z-0 {
    z-index: 0;
  }
  .z-1 {
    z-index: 100;
  }
  .z-2 {
    z-index: 200;
  }
  .z-3 {
    z-index: 300;
  }
  .z-4 {
    z-index: 400;
  }
  .z-5 {
    z-index: 500;
  }
  .z-999 {
    z-index: 999;
  }
  .z-9999 {
    z-index: 9999;
  }
  .z-max {
    z-index: 2147483647;
  }
  @supports (container-type: inline-size) {
    @container (min-width: 992px) {
      .pos-s {
        position: static;
      }
      .pos-r {
        position: relative;
      }
      .pos-a {
        position: absolute;
      }
      .pos-f {
        position: fixed;
      }
      .top-0 {
        top: 0;
      }
      .top-50 {
        top: 50%;
      }
      .top-100 {
        top: 100%;
      }
      .bottom {
        bottom: 0;
      }
      .bottom-50 {
        bottom: 50%;
      }
      .bottom-100 {
        bottom: 100%;
      }
      .left-0 {
        left: 0;
      }
      .left-50 {
        left: 50%;
      }
      .left-100 {
        left: 100%;
      }
      .right-0 {
        right: 0;
      }
      .right-50 {
        right: 50%;
      }
      .right-100 {
        right: 100%;
      }
      .trf-m {
        transform: translate(-50%, -50%);
      }
      .trf-m-x {
        transform: translateX(-50%);
      }
      .trf-m-y {
        transform: translateY(-50%);
      }
      .pos-tl {
        top: 0;
        left: 0;
        transform: translate(0, 0);
      }
      .pos-tc {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .pos-tr {
        top: 0;
        left: 100%;
        transform: translate(-100%, 0);
      }
      .pos-ml {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      .pos-mc {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pos-mr {
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
      }
      .pos-bl {
        top: 100%;
        left: 0;
        transform: translate(0, -100%);
      }
      .pos-bc {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
      }
      .pos-br {
        top: 100%;
        left: 100%;
        transform: translate(-100%, -100%);
      }
      .z-0 {
        z-index: 0;
      }
      .z-1 {
        z-index: 100;
      }
      .z-2 {
        z-index: 200;
      }
      .z-3 {
        z-index: 300;
      }
      .z-4 {
        z-index: 400;
      }
      .z-5 {
        z-index: 500;
      }
      .z-999 {
        z-index: 999;
      }
      .z-9999 {
        z-index: 9999;
      }
      .z-max {
        z-index: 2147483647;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .pos-s-sm {
      position: static;
    }
    .pos-r-sm {
      position: relative;
    }
    .pos-a-sm {
      position: absolute;
    }
    .pos-f-sm {
      position: fixed;
    }
    .top-0-sm {
      top: 0;
    }
    .top-50-sm {
      top: 50%;
    }
    .top-100-sm {
      top: 100%;
    }
    .bottom-sm {
      bottom: 0;
    }
    .bottom-50-sm {
      bottom: 50%;
    }
    .bottom-100-sm {
      bottom: 100%;
    }
    .left-0-sm {
      left: 0;
    }
    .left-50-sm {
      left: 50%;
    }
    .left-100-sm {
      left: 100%;
    }
    .right-0-sm {
      right: 0;
    }
    .right-50-sm {
      right: 50%;
    }
    .right-100-sm {
      right: 100%;
    }
    .trf-m-sm {
      transform: translate(-50%, -50%);
    }
    .trf-m-x-sm {
      transform: translateX(-50%);
    }
    .trf-m-y-sm {
      transform: translateY(-50%);
    }
    .pos-tl-sm {
      top: 0;
      left: 0;
      transform: translate(0, 0);
    }
    .pos-tc-sm {
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .pos-tr-sm {
      top: 0;
      left: 100%;
      transform: translate(-100%, 0);
    }
    .pos-ml-sm {
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }
    .pos-mc-sm {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pos-mr-sm {
      top: 50%;
      left: 100%;
      transform: translate(-100%, -50%);
    }
    .pos-bl-sm {
      top: 100%;
      left: 0;
      transform: translate(0, -100%);
    }
    .pos-bc-sm {
      top: 100%;
      left: 50%;
      transform: translate(-50%, -100%);
    }
    .pos-br-sm {
      top: 100%;
      left: 100%;
      transform: translate(-100%, -100%);
    }
    .z-0-sm {
      z-index: 0;
    }
    .z-1-sm {
      z-index: 100;
    }
    .z-2-sm {
      z-index: 200;
    }
    .z-3-sm {
      z-index: 300;
    }
    .z-4-sm {
      z-index: 400;
    }
    .z-5-sm {
      z-index: 500;
    }
    .z-999-sm {
      z-index: 999;
    }
    .z-9999-sm {
      z-index: 9999;
    }
    .z-max-sm {
      z-index: 2147483647;
    }
  }
  @supports (container-type: inline-size) {
    @container (max-width: 767px) {
      .pos-s-sm {
        position: static;
      }
      .pos-r-sm {
        position: relative;
      }
      .pos-a-sm {
        position: absolute;
      }
      .pos-f-sm {
        position: fixed;
      }
      .top-0-sm {
        top: 0;
      }
      .top-50-sm {
        top: 50%;
      }
      .top-100-sm {
        top: 100%;
      }
      .bottom-sm {
        bottom: 0;
      }
      .bottom-50-sm {
        bottom: 50%;
      }
      .bottom-100-sm {
        bottom: 100%;
      }
      .left-0-sm {
        left: 0;
      }
      .left-50-sm {
        left: 50%;
      }
      .left-100-sm {
        left: 100%;
      }
      .right-0-sm {
        right: 0;
      }
      .right-50-sm {
        right: 50%;
      }
      .right-100-sm {
        right: 100%;
      }
      .trf-m-sm {
        transform: translate(-50%, -50%);
      }
      .trf-m-x-sm {
        transform: translateX(-50%);
      }
      .trf-m-y-sm {
        transform: translateY(-50%);
      }
      .pos-tl-sm {
        top: 0;
        left: 0;
        transform: translate(0, 0);
      }
      .pos-tc-sm {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .pos-tr-sm {
        top: 0;
        left: 100%;
        transform: translate(-100%, 0);
      }
      .pos-ml-sm {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      .pos-mc-sm {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pos-mr-sm {
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
      }
      .pos-bl-sm {
        top: 100%;
        left: 0;
        transform: translate(0, -100%);
      }
      .pos-bc-sm {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
      }
      .pos-br-sm {
        top: 100%;
        left: 100%;
        transform: translate(-100%, -100%);
      }
      .z-0-sm {
        z-index: 0;
      }
      .z-1-sm {
        z-index: 100;
      }
      .z-2-sm {
        z-index: 200;
      }
      .z-3-sm {
        z-index: 300;
      }
      .z-4-sm {
        z-index: 400;
      }
      .z-5-sm {
        z-index: 500;
      }
      .z-999-sm {
        z-index: 999;
      }
      .z-9999-sm {
        z-index: 9999;
      }
      .z-max-sm {
        z-index: 2147483647;
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .pos-s-md {
      position: static;
    }
    .pos-r-md {
      position: relative;
    }
    .pos-a-md {
      position: absolute;
    }
    .pos-f-md {
      position: fixed;
    }
    .top-0-md {
      top: 0;
    }
    .top-50-md {
      top: 50%;
    }
    .top-100-md {
      top: 100%;
    }
    .bottom-md {
      bottom: 0;
    }
    .bottom-50-md {
      bottom: 50%;
    }
    .bottom-100-md {
      bottom: 100%;
    }
    .left-0-md {
      left: 0;
    }
    .left-50-md {
      left: 50%;
    }
    .left-100-md {
      left: 100%;
    }
    .right-0-md {
      right: 0;
    }
    .right-50-md {
      right: 50%;
    }
    .right-100-md {
      right: 100%;
    }
    .trf-m-md {
      transform: translate(-50%, -50%);
    }
    .trf-m-x-md {
      transform: translateX(-50%);
    }
    .trf-m-y-md {
      transform: translateY(-50%);
    }
    .pos-tl-md {
      top: 0;
      left: 0;
      transform: translate(0, 0);
    }
    .pos-tc-md {
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .pos-tr-md {
      top: 0;
      left: 100%;
      transform: translate(-100%, 0);
    }
    .pos-ml-md {
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }
    .pos-mc-md {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .pos-mr-md {
      top: 50%;
      left: 100%;
      transform: translate(-100%, -50%);
    }
    .pos-bl-md {
      top: 100%;
      left: 0;
      transform: translate(0, -100%);
    }
    .pos-bc-md {
      top: 100%;
      left: 50%;
      transform: translate(-50%, -100%);
    }
    .pos-br-md {
      top: 100%;
      left: 100%;
      transform: translate(-100%, -100%);
    }
    .z-0-md {
      z-index: 0;
    }
    .z-1-md {
      z-index: 100;
    }
    .z-2-md {
      z-index: 200;
    }
    .z-3-md {
      z-index: 300;
    }
    .z-4-md {
      z-index: 400;
    }
    .z-5-md {
      z-index: 500;
    }
    .z-999-md {
      z-index: 999;
    }
    .z-9999-md {
      z-index: 9999;
    }
    .z-max-md {
      z-index: 2147483647;
    }
  }
  @supports (container-type: inline-size) {
    @container (min-width: 768px) and (max-width: 991px) {
      .pos-s-md {
        position: static;
      }
      .pos-r-md {
        position: relative;
      }
      .pos-a-md {
        position: absolute;
      }
      .pos-f-md {
        position: fixed;
      }
      .top-0-md {
        top: 0;
      }
      .top-50-md {
        top: 50%;
      }
      .top-100-md {
        top: 100%;
      }
      .bottom-md {
        bottom: 0;
      }
      .bottom-50-md {
        bottom: 50%;
      }
      .bottom-100-md {
        bottom: 100%;
      }
      .left-0-md {
        left: 0;
      }
      .left-50-md {
        left: 50%;
      }
      .left-100-md {
        left: 100%;
      }
      .right-0-md {
        right: 0;
      }
      .right-50-md {
        right: 50%;
      }
      .right-100-md {
        right: 100%;
      }
      .trf-m-md {
        transform: translate(-50%, -50%);
      }
      .trf-m-x-md {
        transform: translateX(-50%);
      }
      .trf-m-y-md {
        transform: translateY(-50%);
      }
      .pos-tl-md {
        top: 0;
        left: 0;
        transform: translate(0, 0);
      }
      .pos-tc-md {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .pos-tr-md {
        top: 0;
        left: 100%;
        transform: translate(-100%, 0);
      }
      .pos-ml-md {
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      .pos-mc-md {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .pos-mr-md {
        top: 50%;
        left: 100%;
        transform: translate(-100%, -50%);
      }
      .pos-bl-md {
        top: 100%;
        left: 0;
        transform: translate(0, -100%);
      }
      .pos-bc-md {
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
      }
      .pos-br-md {
        top: 100%;
        left: 100%;
        transform: translate(-100%, -100%);
      }
      .z-0-md {
        z-index: 0;
      }
      .z-1-md {
        z-index: 100;
      }
      .z-2-md {
        z-index: 200;
      }
      .z-3-md {
        z-index: 300;
      }
      .z-4-md {
        z-index: 400;
      }
      .z-5-md {
        z-index: 500;
      }
      .z-999-md {
        z-index: 999;
      }
      .z-9999-md {
        z-index: 9999;
      }
      .z-max-md {
        z-index: 2147483647;
      }
    }
  }
}