@motion-proto/live-tokens 0.94.3 → 0.96.0

package/src/demo/TestingLoops.svelte

@@ -30,6 +30,13 @@
     if (id) document.getElementById(id)?.scrollIntoView({ block: 'start' });
   });
 
+  function armName(arm: { skills: boolean; lookup: boolean }) {
+    if (arm.skills && arm.lookup) return 'Skills and lookup';
+    if (arm.skills) return 'Skills only';
+    if (arm.lookup) return 'Lookup only';
+    return 'Neither';
+  }
+
   function jump(event: MouseEvent, id: string) {
     event.preventDefault();
     contentsOpen = false;
@@ -68,7 +75,7 @@
       <h2 id="skills-title">LiveTokens skills</h2>
       <div class="text-columns skills-overview">
         <div>
-          <p>The CLI checks verify that skill output uses the design system and works correctly in the browser. They cover token use, component behavior, and page layout. Skills make design decisions and the CLI verifies the code.</p>
+          <p>The CLI checks verify that skill output uses the design system and works correctly in the browser. They cover token use, component behavior, and page layout. Skills make design decisions and the checker verifies the code.</p>
           <p>The package includes eight skills, and one setup command copies them into your project.</p>
         </div>
         <ul class="skill-stack">
@@ -114,12 +121,11 @@
         <div class="figure-stage">
             <!-- svelte-ignore a11y_no_noninteractive_tabindex (Keyboard users need to scroll the diagram.) -->
             <div class="figure-scroll" role="region" aria-label="Figure 1" tabindex="0">
+          <div class="dg-stack">
           <svg class="dg" viewBox="20 12 1160 866" role="img" aria-label="The skill builds a page or component and runs the checks. The CLI checker checks the code, makes the routine repairs, tests the result, and reports the findings. The skill repairs each finding and runs the checks again until every check passes.">
             <rect class="lane-checker" x="20" y="12" width="1160" height="866" rx="8" />
             <path class="lane-skill" d="M28,12 H600 V878 H28 A8,8 0 0 1 20,870 V20 A8,8 0 0 1 28,12 Z" />
             <path class="lane-shade" d="M600,12 H1172 A8,8 0 0 1 1180,20 V870 A8,8 0 0 1 1172,878 H600 Z" />
-            <text class="lane-title" x="80" y="52">Claude Skill</text>
-            <text class="lane-title" x="660" y="52">CLI checker</text>
             <path class="flow" d="M540,148 L876,148 Q890,148 890,162 L890,225" />
             <path class="flow" d="M890,320 L890,353" />
             <path class="flow" d="M890,448 L890,481" />
@@ -128,33 +134,38 @@
             <path class="flow" d="M890,728 L890,781" />
             <path class="back" d="M310,640 L310,290 Q310,276 324,276 L653,276" />
             <rect class="box-lead" x="80" y="104" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="232" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="360" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="488" width="460" height="112" rx="4" />
+            <rect class="box" x="660" y="640" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="640" width="460" height="88" rx="4" />
+            <rect class="box-lead" x="660" y="788" width="460" height="72" rx="4" />
+          </svg>
+          <svg class="dg dg-text" viewBox="20 12 1160 866" aria-hidden="true">
+            <text class="lane-title" x="80" y="52">Claude Skill</text>
+            <text class="lane-title" x="660" y="52">CLI checker</text>
             <text class="t" x="101.3" y="138">Build a page or component</text>
             <text class="s" x="101.3" y="166">from the catalogue and design tokens</text>
-            <rect class="box" x="660" y="232" width="460" height="88" rx="4" />
             <text class="t" x="681.3" y="266">Check the code</text>
             <text class="tag" x="1098.7" y="266" text-anchor="end">Static check</text>
             <text class="s" x="681.3" y="294">design tokens, components, and props</text>
-            <rect class="box" x="660" y="360" width="460" height="88" rx="4" />
             <text class="t" x="681.3" y="394">Make the routine repairs</text>
             <text class="s" x="681.3" y="422">fixes with one right answer</text>
-            <rect class="box" x="660" y="488" width="460" height="112" rx="4" />
             <text class="t" x="681.3" y="522">Test the result</text>
             <text class="tag" x="1098.7" y="522" text-anchor="end">Vitest · Playwright</text>
             <text class="s" x="681.3" y="550">Test component interactions, rendering, and themes.</text>
             <text class="s" x="681.3" y="574">Check page layout, contrast, and typography.</text>
-            <rect class="box" x="660" y="640" width="460" height="88" rx="4" />
             <text class="t" x="681.3" y="674">Report the findings</text>
             <text class="s" x="681.3" y="702">each with guidance for its repair</text>
-            <rect class="box" x="80" y="640" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="674">Repair each finding</text>
             <text class="s" x="101.3" y="702">make the choice or write the code</text>
-            <rect class="box-lead" x="660" y="788" width="460" height="72" rx="4" />
             <text class="t" x="890" y="830" text-anchor="middle">Every check passes</text>
             <text class="lbl" x="715" y="136" text-anchor="middle">run the checks</text>
             <text class="lbl" x="600" y="672" text-anchor="middle">findings</text>
             <text class="lbl" x="906" y="759">none remain</text>
             <text class="rule" x="479" y="262" text-anchor="middle">check again</text>
           </svg>
+          </div>
             </div>
         </div>
       </figure>
@@ -172,12 +183,11 @@
         <div class="figure-stage">
             <!-- svelte-ignore a11y_no_noninteractive_tabindex (Keyboard users need to scroll the diagram.) -->
             <div class="figure-scroll" role="region" aria-label="Figure 2" tabindex="0">
+          <div class="dg-stack">
           <svg class="dg" viewBox="20 12 1160 916" role="img" aria-label="Read the project, plan the sections, and choose components. When no component fits, create one and check it until every check passes, and it joins the catalogue. Assemble the page and check it. Repair each finding until every check passes, then review the page.">
             <rect class="lane-checker" x="20" y="12" width="1160" height="916" rx="8" />
             <path class="lane-skill" d="M28,12 H600 V928 H28 A8,8 0 0 1 20,920 V20 A8,8 0 0 1 28,12 Z" />
             <path class="lane-shade" d="M600,12 H1172 A8,8 0 0 1 1180,20 V920 A8,8 0 0 1 1172,928 H600 Z" />
-            <text class="lane-title" x="80" y="52">Page</text>
-            <text class="lane-title" x="660" y="52">New component</text>
             <path class="flow" d="M310,192 L310,225" />
             <path class="flow" d="M310,320 L310,353" />
             <path class="flow" d="M310,448 L310,545" />
@@ -187,25 +197,29 @@
             <path class="back" d="M540,724 L556,724 Q570,724 570,710 L570,629 Q570,620 561,620 L547,620" />
             <path class="flow" d="M310,768 L310,813" />
             <rect class="box-lead" x="80" y="104" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="232" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="360" width="460" height="88" rx="4" />
+            <rect class="box" x="660" y="360" width="460" height="112" rx="4" />
+            <rect class="box" x="80" y="552" width="460" height="88" rx="4" />
+            <rect class="box" x="80" y="680" width="460" height="88" rx="4" />
+            <rect class="box-lead" x="80" y="820" width="460" height="88" rx="4" />
+          </svg>
+          <svg class="dg dg-text" viewBox="20 12 1160 916" aria-hidden="true">
+            <text class="lane-title" x="80" y="52">Page</text>
+            <text class="lane-title" x="660" y="52">New component</text>
             <text class="t" x="101.3" y="138">Read the project</text>
             <text class="s" x="101.3" y="166">routes, grid, and the component catalogue</text>
-            <rect class="box" x="80" y="232" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="266">Plan the sections</text>
             <text class="s" x="101.3" y="294">one section per purpose</text>
-            <rect class="box" x="80" y="360" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="394">Choose components</text>
             <text class="s" x="101.3" y="422">from the catalogue first</text>
-            <rect class="box" x="660" y="360" width="460" height="112" rx="4" />
             <text class="t" x="681.3" y="394">Create the component</text>
             <text class="s" x="681.3" y="422">check it and repair it</text>
             <text class="s" x="681.3" y="446">until every check passes</text>
-            <rect class="box" x="80" y="552" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="586">Assemble the page</text>
             <text class="s" x="101.3" y="614">components, tokens, and text styles</text>
-            <rect class="box" x="80" y="680" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="714">Check the page</text>
             <text class="s" x="101.3" y="742">review the code and test it in the browser</text>
-            <rect class="box-lead" x="80" y="820" width="460" height="88" rx="4" />
             <text class="t" x="101.3" y="854">Review the page</text>
             <text class="s" x="101.3" y="882">read it the way a visitor would</text>
             <text class="lbl" x="326" y="499">a shipped component fits</text>
@@ -214,6 +228,7 @@
             <text class="rule" x="584" y="677">repair</text>
             <text class="lbl" x="326" y="793">every check passes</text>
           </svg>
+          </div>
             </div>
         </div>
       </figure>
@@ -356,29 +371,27 @@
   <section class="chapter" id="measured-value" aria-labelledby="measured-value-title">
     <div class="chapter-body">
       <h2 id="measured-value-title">Measured value</h2>
-      <p>An eval asked an agent to choose a component for {result.requirements} requirements. It ran in four arms of {result.runsPerArm} runs each: with and without the skills, and with and without the CLI. The arms chose the same components, with one miss among 144 answers, and differ in turns, time, and cost.</p>
+      <p>An eval asked an agent to choose a component for {result.requirements} requirements. It ran in four arms of {result.runsPerArm} runs each: with and without the skills, and with and without the lookup, the <code>live-tokens components</code> command that lists each component with its entry and props. The arms chose the same components, with one miss among 144 answers, and differ in turns, time, and cost.</p>
       <div class="eval-results">
         <Table>
           <table aria-label="Eval arms">
             <thead>
               <tr>
-                <th scope="col">Skills</th>
-                <th scope="col">CLI</th>
-                <th scope="col">Requirements right</th>
+                <th scope="col">Arm</th>
+                <th scope="col">Accuracy</th>
                 <th scope="col">Turns</th>
                 <th scope="col">Seconds</th>
                 <th scope="col">Cost</th>
               </tr>
             </thead>
             <tbody>
-              {#each result.arms as arm (`${arm.skills}-${arm.cli}`)}
+              {#each result.arms as arm (`${arm.skills}-${arm.lookup}`)}
                 <tr>
-                  <td>{arm.skills ? 'Yes' : 'No'}</td>
-                  <td>{arm.cli ? 'Yes' : 'No'}</td>
-                  <td>{arm.rowsRight}</td>
-                  <td>{arm.turns}</td>
-                  <td>{arm.seconds}</td>
-                  <td>{arm.cost}</td>
+                  <td>{armName(arm)}</td>
+                  <td data-label="Accuracy">{arm.rowsRight}</td>
+                  <td data-label="Turns">{arm.turns}</td>
+                  <td data-label="Seconds">{arm.seconds}</td>
+                  <td data-label="Cost">{arm.cost}</td>
                 </tr>
               {/each}
             </tbody>
@@ -386,10 +399,10 @@
         </Table>
       </div>
       <ul class="eval-summary">
-        <li><strong>Turns:</strong> the skill saves turns only through the CLI command. Without the CLI, the skill arm takes as many turns as the agent with neither.</li>
-        <li><strong>Time and cost:</strong> the skills and the CLI each save time on their own, and together the run costs less than half as much as with neither.</li>
+        <li><strong>Turns:</strong> the skill saves turns only through the lookup. Without the lookup, the skill arm takes as many turns as the agent with neither.</li>
+        <li><strong>Time and cost:</strong> the skills and the lookup each save time on their own, and together the run costs less than half as much as with neither.</li>
         <li><strong>Accuracy:</strong> every arm scores about the same. The choices come from the entries in the component files.</li>
-        <li><strong>Change since 2026-09-20:</strong> in that run, no agent without the skills found the CLI; this time 2 of 3 did, so that arm varies from run to run.</li>
+        <li><strong>Change since 2026-09-20:</strong> in that run, no agent without the skills found the lookup; this time 2 of 3 did, so that arm varies from run to run.</li>
       </ul>
       <div class="text-columns">
         <div>
@@ -456,9 +469,11 @@
     display: grid;
     grid-template-columns: repeat(var(--columns-count), minmax(var(--space-0), 1fr));
     column-gap: var(--columns-gutter);
+    box-sizing: content-box;
     max-width: var(--columns-max-width);
     margin-inline: auto;
-    padding: var(--space-48) var(--space-32) var(--space-64);
+    padding-block: var(--space-48) var(--space-64);
+    padding-inline: var(--columns-margin);
     color: var(--text-primary);
   }
 
@@ -664,6 +679,16 @@
     width: auto;
   }
 
+  /* The panel's stage padding sized for a figure makes a one-line toggle a tall slab. */
+  .contents {
+    --panel-stage-padding: var(--space-4);
+    --panel-stage-inline-padding: var(--space-8);
+  }
+
+  .contents :global(.panel) {
+    justify-content: flex-start;
+  }
+
   .contents-body {
     width: 100%;
     min-width: var(--space-0);
@@ -775,6 +800,24 @@
     overflow-x: auto;
   }
 
+  /* A phone frame scrolls the diagram, and the default overlay bar is too thin
+     to signal it. The standard scrollbar-width has no length value, and setting
+     it would disable these pseudo-elements in Chromium. */
+  .figure-scroll::-webkit-scrollbar {
+    height: var(--space-32);
+  }
+
+  .figure-scroll::-webkit-scrollbar-track {
+    background: var(--surface-neutral-low);
+    border-radius: var(--radius-full);
+  }
+
+  .figure-scroll::-webkit-scrollbar-thumb {
+    background: var(--surface-neutral-higher);
+    border: var(--border-width-1) solid var(--border-neutral);
+    border-radius: var(--radius-full);
+  }
+
   /* Inside the figure's subgrid, so 1 / 7 lines up with the text column. */
   figcaption {
     grid-column: 1 / 7;
@@ -797,6 +840,21 @@
     color: var(--text-primary);
   }
 
+  /* Sketch mode filters every inline svg as artwork, which smears type. The
+     text gets its own svg over the shapes, so the boxes stay drawn and the
+     labels crisp. */
+  .dg-stack {
+    display: grid;
+  }
+
+  .dg-stack > .dg {
+    grid-area: 1 / 1;
+  }
+
+  .dg-text {
+    --sketch-icon-off: none;
+  }
+
   .dg :global(.lane-checker) {
     fill: none;
     stroke: var(--border-neutral-subtle);
@@ -950,10 +1008,16 @@
       display: block;
     }
 
+    /* The top leaves room for the fixed editor toolbar above the back link. */
     .loops {
-      grid-template-columns: minmax(var(--space-0), 1fr);
-      /* Leave room for the fixed editor toolbar above the back link. */
-      padding: var(--space-64) var(--space-20) var(--space-48);
+      padding-block: var(--space-64) var(--space-48);
+    }
+
+    /* Both outrank the 1023px block's `.chapter-body > *`, so without this
+       they keep the 2 / -2 inset the rest of the chapter drops. */
+    .chapter-body > h1,
+    .chapter-body > .eval-results {
+      grid-column: 1 / -1;
     }
 
     h1 {
@@ -972,5 +1036,73 @@
       padding-block: var(--space-32);
     }
 
+    /* A phone leaves too little width for side-by-side columns, so each row stacks into a card. */
+    :is(.rule-group, .eval-results) :global(.table-wrapper :is(table, tbody, tr, td)) {
+      display: block;
+      min-width: var(--space-0);
+    }
+
+    :is(.rule-group, .eval-results) :global(.table-wrapper thead) {
+      display: none;
+    }
+
+    /* The row's first cell takes the table's header style and captions the card. */
+    :is(.rule-group, .eval-results) :global(.table-wrapper td:first-child) {
+      border-right: none;
+      border-bottom: var(--table-default-header-hairline-width) solid var(--table-default-header-hairline-color);
+      background: var(--table-default-header-surface);
+      color: var(--table-default-header-text);
+      font-family: var(--table-default-header-font-family);
+      font-size: var(--table-default-header-font-size);
+      font-weight: var(--table-default-header-font-weight);
+      line-height: var(--table-default-header-line-height);
+      /* Half again as tall as a body row, so each card's caption marks a break between rules. */
+      padding-top: calc(var(--table-default-cell-padding-top, var(--table-default-cell-padding)) * 1.5 + 0.25lh);
+      padding-bottom: calc(var(--table-default-cell-padding-bottom, var(--table-default-cell-padding)) * 1.5 + 0.25lh);
+    }
+
+    .rule-group :global(.table-wrapper td:last-child) {
+      padding-bottom: calc(var(--table-default-cell-padding-bottom, var(--table-default-cell-padding)) + 0.5lh);
+    }
+
+    .eval-results :global(.table-wrapper tr:not(:last-child) td:last-child) {
+      border-bottom: var(--table-default-header-hairline-width) solid var(--table-default-header-hairline-color);
+    }
+
+    /* Each rule stands as its own box: the wrapper hands its chrome to every row.
+       Visible overflow keeps the wrapper's scroll box from clipping each row's shadow. */
+    .rule-group :global(.table-wrapper) {
+      overflow: visible;
+      background: none;
+      border: none;
+      border-radius: var(--radius-none);
+      box-shadow: none;
+    }
+
+    .rule-group :global(.table-wrapper tbody) {
+      display: grid;
+      gap: var(--space-12);
+    }
+
+    .rule-group :global(.table-wrapper tr) {
+      overflow: hidden;
+      background: var(--table-default-surface);
+      border: var(--table-default-border-width) solid var(--table-default-border);
+      border-radius: var(--table-default-radius);
+      box-shadow: var(--table-default-shadow);
+    }
+
+    /* The hidden header row named these columns, so each value carries its own label. */
+    .eval-results :global(.table-wrapper td[data-label]) {
+      display: grid;
+      grid-template-columns: minmax(var(--space-0), 2fr) minmax(var(--space-0), 3fr);
+      column-gap: var(--space-12);
+      border-right: none;
+    }
+
+    .eval-results :global(.table-wrapper td[data-label]::before) {
+      content: attr(data-label);
+      font-weight: var(--table-default-header-font-weight);
+    }
   }
 </style>

package/src/demo/evalResults.ts

@@ -1,7 +1,7 @@
-/** One arm of an eval: the same case run with or without the skills, and with or without the CLI. */
+/** One arm of an eval: the same case run with or without the skills, and with or without the lookup command. */
 export interface EvalArm {
   skills: boolean;
-  cli: boolean;
+  lookup: boolean;
   rowsRight: string;
   turns: string;
   seconds: string;
@@ -28,7 +28,7 @@ export const pickComponentEval: EvalResult = {
   arms: [
     {
       skills: true,
-      cli: true,
+      lookup: true,
       rowsRight: '12 of 12 in all 3 runs',
       turns: '9 to 10',
       seconds: '46 to 76',
@@ -36,15 +36,15 @@ export const pickComponentEval: EvalResult = {
     },
     {
       skills: false,
-      cli: true,
-      rowsRight: '12 of 12 in all 3 runs; 2 of 3 found the CLI on their own',
+      lookup: true,
+      rowsRight: '12 of 12 in all 3 runs; 2 of 3 found the lookup on their own',
       turns: '15 to 17',
       seconds: '65 to 102',
       cost: '$0.63 to $0.74',
     },
     {
       skills: true,
-      cli: false,
+      lookup: false,
       rowsRight: '12 of 12 in all 3 runs',
       turns: '14 to 20',
       seconds: '66 to 84',
@@ -52,7 +52,7 @@ export const pickComponentEval: EvalResult = {
     },
     {
       skills: false,
-      cli: false,
+      lookup: false,
       rowsRight: '11 of 12 in one run, which missed requirement 12',
       turns: '17 to 20',
       seconds: '113 to 169',

package/src/demo/sections/SectionClaude.svelte

@@ -66,28 +66,26 @@
   .claude {
     grid-column: 1 / -1;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
     row-gap: var(--space-8);
     align-items: start;
-    margin-bottom: var(--space-96);
   }
 
   .claude :global(.section-divider) {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
   }
 
-  /* Panel sits on page columns 2, 3, 4; the copy starts on column 5, hard
+  /* Panel sits on page columns 2 to 5; the copy starts on column 6, hard
      against the panel's right edge. */
   .panel-col {
-    grid-column: 2 / 5;
+    grid-column: 2 / 6;
     grid-row: 2;
     align-self: start;
     margin-top: var(--space-16);
   }
 
   .copy {
-    grid-column: 5 / 11;
+    grid-column: 6 / -2;
     grid-row: 2;
     align-self: start;
     display: flex;
@@ -98,7 +96,7 @@
 
   .intro {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-tighter);
     font-weight: var(--font-weight-semibold);
     color: var(--text-primary);
@@ -114,7 +112,7 @@
   .install-caption {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     line-height: var(--line-height-normal);
     color: var(--text-secondary);
   }
@@ -171,17 +169,16 @@
 
   .skill-name {
     font-family: var(--font-sans);
-    font-size: var(--font-size-2xl);
+    font-size: var(--heading-md-font-size);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-normal);
     color: var(--text-primary);
   }
 
-  @media (max-width: 960px) {
-    .claude :global(.section-divider),
+  @media (max-width: 1200px) {
     .panel-col,
     .copy {
-      grid-column: 1 / -1;
+      grid-column: var(--kit-content);
     }
 
     .panel-col,
@@ -189,4 +186,14 @@
       grid-row: auto;
     }
   }
+
+  @media (max-width: 600px) {
+    .atlas {
+      align-items: stretch;
+    }
+
+    .atlas-actions {
+      flex-direction: column;
+    }
+  }
 </style>

package/src/demo/sections/SectionFooter.svelte

@@ -16,7 +16,7 @@
 
 <style>
   .provenance {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     padding-top: var(--space-24);
     border-top: var(--border-width-2) solid var(--border-neutral);
     display: flex;
@@ -34,7 +34,7 @@
   .license {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-lg);
+    font-size: var(--body-lg-font-size);
     color: var(--text-secondary);
   }
 
@@ -52,13 +52,12 @@
   .copyright {
     margin: 0;
     font-family: var(--font-sans);
-    font-size: var(--font-size-md);
+    font-size: var(--body-md-font-size);
     color: var(--text-secondary);
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .provenance {
-      grid-column: 1 / -1;
       flex-direction: column;
       align-items: flex-start;
       gap: var(--space-24);

package/src/demo/sections/SectionGetStarted.svelte

@@ -34,12 +34,11 @@ npm run dev`;
   .get-started {
     grid-column: 1 / -1;
     display: grid;
-    grid-template-columns: repeat(var(--columns-count), 1fr);
-    column-gap: var(--columns-gutter);
+    grid-template-columns: subgrid;
   }
 
   .gs-panel {
-    grid-column: 2 / -2;
+    grid-column: var(--kit-content);
     /* The .kit grid can stretch this section's row past its content (min-height:
        100vh on a short page); keep the panel sized to its content regardless. */
     align-self: start;
@@ -68,7 +67,7 @@ npm run dev`;
 
   .intro {
     font-family: var(--font-sans);
-    font-size: var(--font-size-xl);
+    font-size: var(--body-xl-font-size);
     line-height: var(--line-height-tighter);
     font-weight: var(--font-weight-semibold);
     color: var(--text-primary);
@@ -91,9 +90,9 @@ npm run dev`;
     overflow-y: hidden;
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1200px) {
     .columns {
-      grid-template-columns: 1fr;
+      grid-template-columns: minmax(0, 1fr);
       align-items: stretch;
     }
   }