@24vlh/vds 0.1.0

package/dist/core.css

@@ -0,0 +1,866 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Primitives Layer
+ *
+ *  Responsibilities:
+ *    - Define the neutral design tokens: typography, spacing,
+ *      radii, borders, shadows, layout widths, icons, motion,
+ *      easing, z-index, and accessibility foundations
+ *    - Provide the root variable system used by all themes,
+ *      components, utilities, and layout layers
+ *    - Establish consistent scales, ratios, and naming patterns
+ *      that remain invariant across themes and contexts
+ *
+ *  System Notes:
+ *    - Pure token layer; declares no rendering rules
+ *    - MUST load before base.css, layout.css, utilities, components, and all themes
+ *    - Breakpoints listed are reference-only and should be used
+ *      by higher layers via min-width media queries
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. ROOT TOKEN ARCHITECTURE (Neutral Layer)
+--------------------------------------------------------- */
+
+:root {
+
+    /* -----------------------------------------------------
+       TYPOGRAPHY - Families, Scale, Line Heights, Weights
+    ----------------------------------------------------- */
+    --font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    --text-xxxs: 0.65rem;
+    --text-xxs: 0.75rem;
+    --text-xs: 0.8125rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-md: 1.0625rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3.25rem;
+
+    --line-height-xs-tight: 0.5;
+    --line-height-tight: 1.1;
+    --line-height-xl-tight: 1.2;
+    --line-height-snug: 1.25;
+    --line-height-normal: 1.5;
+    --line-height-relaxed: 1.7;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    --letter-tight: -0.015em;
+    --letter-normal: 0;
+    --letter-loose: 0.015em;
+
+    --footnote-font-size: var(--text-xs);
+
+    /* -----------------------------------------------------
+       SPACING SYSTEM - Space, Gap, Padding, Component Rhythm
+    ----------------------------------------------------- */
+    --space-0: 0;
+    --space-0_5: 0.125rem;
+    --space-1: 0.25rem;
+    --space-1_5: 0.375rem;
+    --space-2: 0.5rem;
+    --space-2_5: 0.625rem;
+    --space-3: 0.75rem;
+    --space-3_5: 0.875rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-5_5: 1.3125rem;
+    --space-6: 1.5rem;
+    --space-7: 1.75rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-14: 3.5rem;
+    --space-16: 4rem;
+    --space-20: 5rem;
+    --space-24: 6rem;
+    --space-28: 7rem;
+    --space-32: 8rem;
+    --space-36: 9rem;
+    --space-40: 10rem;
+    --space-44: 11rem;
+    --space-48: 12rem;
+    --space-64: 16rem;
+
+    --section-spacing-xs: var(--space-6);
+    --section-spacing-sm: var(--space-8);
+    --section-spacing-md: var(--space-12);
+    --section-spacing-lg: var(--space-16);
+    --section-spacing-xl: var(--space-20);
+
+    --gap-xs: var(--space-2);
+    --gap-sm: var(--space-3);
+    --gap-md: var(--space-6);
+    --gap-lg: var(--space-8);
+    --gap-xl: var(--space-12);
+
+    --component-gap-xs: var(--space-2);
+    --component-gap-sm: var(--space-3);
+    --component-gap-md: var(--space-4);
+    --component-gap-lg: var(--space-6);
+    --component-gap-xl: var(--space-10);
+
+    /* -----------------------------------------------------
+       RADII, BORDERS, SHADOWS
+    ----------------------------------------------------- */
+    --radius-none: 0;
+    --radius-xs: 2px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 18px;
+    --radius-full: 999px;
+    --radius-pill: 9999px;
+
+    --border-width: 1px;
+    --border-width-strong: 3px;
+    --tab-indicator-height: 2px;
+
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
+    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
+
+    /* -----------------------------------------------------
+       LAYOUT - Widths, Containers, Structure
+    ----------------------------------------------------- */
+    --layout-max-width: 80rem;
+
+    --content-width-sm: 640px;
+    --content-width-md: 768px;
+    --content-width-lg: 1024px;
+    --content-width-xl: 1200px;
+    --content-width-2xl: 1440px;
+
+    --sidebar-width-md: 280px;
+
+    --grid-min: 16rem;
+
+    /* -----------------------------------------------------
+       ICONS & AVATARS
+    ----------------------------------------------------- */
+    --icon-xxs: 1rem;
+    --icon-xs: 1.15rem;
+    --icon-sm: 1.25rem;
+    --icon-md: 1.35rem;
+    --icon-lg: 1.75rem;
+    --icon-xl: 2.25rem;
+
+    --icon-container-sm: 1.75rem;
+    --icon-container-md: 2.25rem;
+    --icon-container-lg: 3rem;
+    --icon-container-xl: 3.75rem;
+
+    --icon-stroke-thin: 1.25;
+    --icon-stroke-regular: 1.75;
+    --icon-stroke-bold: 2.25;
+
+    --avatar-size-sm: var(--space-7);
+    --avatar-size-md: var(--space-10);
+    --avatar-size-lg: var(--space-16);
+    --avatar-status-size: var(--space-2);
+
+    /* -----------------------------------------------------
+       MOTION / TRANSITIONS / EASING
+    ----------------------------------------------------- */
+    --transition-fast: 120ms ease-out;
+    --transition-normal: 180ms ease-out;
+    --transition-slow: 260ms ease-out;
+
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+    --motion-none: 0ms;
+
+    /* -----------------------------------------------------
+       Z-INDEX STACK
+    ----------------------------------------------------- */
+    --z-negative: -1;
+    --z-base: 0;
+    --z-header: 10;
+    --z-backdrop: 80;
+    --z-modal: 90;
+    --z-drawer: 95;
+    --z-toast: 100;
+    --z-tooltip: 110;
+
+    --z-sticky: 40;
+    --z-sticky-col: 39;
+
+    /* -----------------------------------------------------
+       ACCESSIBILITY / FOCUS / SELECTION
+    ----------------------------------------------------- */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+}
+
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Base Layer
+ *
+ *  Responsibilities:
+ *    - Set global primitives: type scale, spacing, radii, motion,
+ *      layout widths, and z-index hierarchy
+ *    - Apply a modern reset / normalize across all HTML elements
+ *    - Define structural layout primitives (page flex root, body flex)
+ *    - Provide default link, list, table, and code behaviours
+ *      consumed by all other VDS layers
+ *
+ *  System Notes:
+ *    - Pure CSS: no JS assumptions or behavioural dependencies
+ *    - Typography, layout utilities, and component styles live in
+ *      their own modules and layer on top of this
+ *    - Base must load before themes and before any component CSS
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. BASE TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+a {
+    --link-underline-thickness: 2px;
+}
+
+/* ---------------------------------------------------------
+   2. MODERN RESET / NORMALIZE
+--------------------------------------------------------- */
+
+html {
+    box-sizing: border-box;
+    line-height: 1.5;
+    line-height: var(--line-height-normal);
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
+}
+
+*, *::before, *::after {
+    box-sizing: inherit;
+    min-width: 0;
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-subtle) transparent;
+    -webkit-box-decoration-break: clone;
+            box-decoration-break: clone;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--color-bg);
+    color: var(--color-text);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", sans-serif, sans-serif;
+    font-family: var(--font-family-sans), sans-serif;
+    font-size: 1rem;
+    font-size: var(--text-base);
+    text-rendering: optimizeLegibility;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+img {
+    height: auto;
+}
+
+button,
+input,
+textarea,
+select {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+}
+
+button {
+    border: none;
+    background: none;
+    padding: 0;
+}
+
+button,
+[role="button"],
+input[type="submit"],
+input[type="button"] {
+    cursor: pointer;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="search"] {
+    -webkit-appearance: none;
+    outline-offset: -2px;
+}
+
+textarea {
+    resize: vertical;
+}
+
+input,
+select,
+textarea {
+    line-height: inherit;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+legend {
+    padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6,
+p,
+ul, ol,
+figure,
+blockquote,
+dl, dd {
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    padding: 0;
+    color: inherit;
+}
+
+p,
+ul, ol,
+figure,
+blockquote {
+    padding: 0;
+}
+
+ul, ol {
+    padding-left: 1.5rem;
+    padding-left: var(--space-6);
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+    margin: 0;
+    padding-left: 1rem;
+    padding-left: var(--space-4);
+}
+
+b,
+strong {
+    font-weight: 700;
+    font-weight: var(--font-weight-bold);
+}
+
+hr {
+    margin: 1.5rem 0;
+    margin: var(--space-6) 0;
+    border: none;
+    border-top: 1px solid var(--color-border-subtle);
+    border-top: var(--border-width) solid var(--color-border-subtle);
+}
+
+a {
+    color: var(--link-text);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    transition: color 180ms ease-out;
+    transition: color var(--transition-normal);
+}
+
+a:hover {
+    color: var(--link-text-hover);
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+    -webkit-text-decoration-skip: ink;
+            text-decoration-skip-ink: auto;
+    text-decoration-thickness: 1px;
+    text-decoration-thickness: var(--link-underline-thickness, 1px);
+}
+
+a:active {
+    color: var(--link-text-active);
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+:focus {
+    outline: 2px solid var(--focus-ring-color);
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: 2px;
+    outline-offset: var(--focus-ring-offset);
+}
+
+:focus:not(:focus-visible) {
+    outline: none;
+}
+
+:focus-visible {
+    outline: 2px solid var(--focus-ring-color);
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: 2px;
+    outline-offset: var(--focus-ring-offset);
+}
+
+::-moz-selection {
+    background: var(--color-selection-bg);
+    color: var(--color-selection-text);
+}
+
+::selection {
+    background: var(--color-selection-bg);
+    color: var(--color-selection-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --transition-fast: var(--motion-none);
+        --transition-normal: var(--motion-none);
+        --transition-slow: var(--motion-none);
+
+        --ease-out: linear;
+        --ease-in: linear;
+        --ease-in-out: linear;
+    }
+
+    * {
+        animation-duration: 0ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0ms !important;
+        scroll-behavior: auto !important;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+@media (forced-colors: active) {
+    * {
+        forced-color-adjust: none;
+    }
+}
+
+/* ---------------------------------------------------------
+   3. GLOBAL STRUCTURE
+--------------------------------------------------------- */
+
+html,
+body {
+    width: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 0 auto;
+}
+
+footer {
+    flex-shrink: 0;
+}
+
+/* ---------------------------------------------------------
+   4. CODE STYLES
+--------------------------------------------------------- */
+
+code {
+    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
+    font-family: var(--font-family-mono), monospace;
+    font-size: 0.875em;
+}
+
+pre {
+    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
+    font-family: var(--font-family-mono), monospace;
+    font-size: 0.875em;
+    background: var(--code-bg);
+    color: var(--color-text);
+    border: 1px solid var(--code-border);
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+pre, code {
+    -moz-tab-size: 4;
+      -o-tab-size: 4;
+         tab-size: 4;
+}
+
+kbd,
+samp {
+    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
+    font-family: var(--font-family-mono), monospace;
+}
+
+#root, /* React, Vite */
+#app, /* Vue, Svelte, Solid */
+#__next, /* Next.js */
+#__nuxt, /* Nuxt */
+app-root, /* Angular */
+svelte-root, /* Some Svelte starter kits */
+astro-root, /* Astro hybrid apps */
+[qwik-root], /* Qwik */
+.app-root, /* Generic container */
+[data-app-root], /* Custom micro-frontend root */
+[data-spa-root] /* Universal custom attribute */
+{
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    width: 100%;
+}
+
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Layout Layer
+ *
+ *  Responsibilities:
+ *    - Provide the global page-frame architecture (header, content, footer)
+ *    - Define reusable interior content regions for any block or module
+ *    - Implement the container system (narrow, normal, wide, tight, relaxed)
+ *    - Establish the page section vertical rhythm (XS–XL)
+ *    - Supply structural grid layouts (auto-fit, 2/3/4 column)
+ *    - Define high-level layouts: sidebar, right-sidebar, split, split-reverse
+ *
+ *  System Notes:
+ *    - 100% token-driven: widths, gaps, section spacing, sidebar widths
+ *    - Pure CSS; no JS positioning, no behavioural dependencies
+ *    - Intended to sit above base.css and before content-blocks/components
+ *    - Low-level spacing/flex utilities live in utilities.css, not here
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. PAGE FRAME SYSTEM  (single-instance)
+--------------------------------------------------------- */
+
+header.page-header {
+    width: 100%;
+    position: relative;
+    z-index: 10;
+    z-index: var(--z-header);
+}
+
+main.page-content {
+    width: 100%;
+    flex: 1 0 auto;
+}
+
+footer.page-footer {
+    width: 100%;
+    position: relative;
+    z-index: 0;
+    z-index: var(--z-base);
+}
+
+/* ---------------------------------------------------------
+   2. CONTENT REGIONS (multi-instance, reusable)
+--------------------------------------------------------- */
+
+.content-header {
+    width: 100%;
+}
+
+.content-body {
+    width: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.content-footer {
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* ---------------------------------------------------------
+   3. CONTAINER SYSTEM
+--------------------------------------------------------- */
+
+.container {
+    width: 100%;
+    max-width: 1200px;
+    max-width: var(--content-width-xl);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-wide {
+    width: 100%;
+    max-width: 1440px;
+    max-width: var(--content-width-2xl);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-narrow {
+    width: 100%;
+    max-width: 1024px;
+    max-width: var(--content-width-lg);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-tight {
+    width: 100%;
+    max-width: 768px;
+    max-width: var(--content-width-md);
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+.container-relaxed {
+    width: 100%;
+    max-width: 90ch;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+}
+
+@media (max-width: 768px) {
+    .container,
+    .container-wide,
+    .container-narrow,
+    .container-tight,
+    .container-relaxed {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+    }
+}
+
+.full-bleed {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.section-bleed {
+    margin-left: calc(-1 * 1rem);
+    margin-right: calc(-1 * 1rem);
+    margin-left: calc(-1 * var(--space-4));
+    margin-right: calc(-1 * var(--space-4));
+}
+
+@media (max-width: 768px) {
+    .section-bleed {
+        margin-left: calc(-1 * 0.75rem);
+        margin-right: calc(-1 * 0.75rem);
+        margin-left: calc(-1 * var(--space-3));
+        margin-right: calc(-1 * var(--space-3));
+    }
+}
+
+/* ---------------------------------------------------------
+   4. SECTION SPACING (vertical rhythm)
+--------------------------------------------------------- */
+
+.section-none {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.section-xs {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    padding-top: var(--section-spacing-xs);
+    padding-bottom: var(--section-spacing-xs);
+}
+
+.section-sm {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    padding-top: var(--section-spacing-sm);
+    padding-bottom: var(--section-spacing-sm);
+}
+
+.section {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    padding-top: var(--section-spacing-md);
+    padding-bottom: var(--section-spacing-md);
+}
+
+.section-lg {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    padding-top: var(--section-spacing-lg);
+    padding-bottom: var(--section-spacing-lg);
+}
+
+.section-xl {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    padding-top: var(--section-spacing-xl);
+    padding-bottom: var(--section-spacing-xl);
+}
+
+/* ---------------------------------------------------------
+   5. STRUCTURAL GRID LAYOUTS
+--------------------------------------------------------- */
+
+.layout-grid-auto {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.layout-grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.layout-grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.layout-grid-4 {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+@media (max-width: 768px) {
+    .layout-grid-2,
+    .layout-grid-3,
+    .layout-grid-4 {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ---------------------------------------------------------
+   6. HIGH-LEVEL SEMANTIC LAYOUTS
+--------------------------------------------------------- */
+
+.sidebar-layout {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    grid-template-columns: var(--sidebar-width-md) 1fr;
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.sidebar-layout-right {
+    display: grid;
+    grid-template-columns: 1fr 280px;
+    grid-template-columns: 1fr var(--sidebar-width-md);
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+@media (max-width: 1024px) {
+    .sidebar-layout,
+    .sidebar-layout-right {
+        grid-template-columns: 1fr;
+    }
+}
+
+.split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.split-reverse {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 2rem;
+    grid-gap: var(--gap-lg);
+    gap: 2rem;
+    gap: var(--gap-lg);
+}
+
+.split-reverse > *:first-child {
+    order: 2;
+}
+
+.split-reverse > *:last-child {
+    order: 1;
+}
+
+@media (max-width: 768px) {
+    .split,
+    .split-reverse {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (min-width: 769px) {
+    .split-reverse > * {
+        order: initial;
+    }
+}