@ebay/skin 15.5.1 → 16.0.0-0

package/src/less/menu-button/stories/base.stories.js

@@ -5,8 +5,8 @@ export const collapsed = () => `
     <button class="btn btn--secondary" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -31,8 +31,8 @@ export const disabled = () => `
     <button class="btn btn--secondary" aria-haspopup="true" type="button" disabled>
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -57,8 +57,8 @@ export const expanded = () => `
     <button class="btn btn--secondary" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -83,8 +83,8 @@ export const collapsedForm = () => `
     <button class="btn btn--form" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -109,8 +109,8 @@ export const expandedForm = () => `
     <button class="btn btn--form" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -135,8 +135,8 @@ export const badged = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -161,8 +161,8 @@ export const expandedDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -187,8 +187,8 @@ export const radioItems = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -196,20 +196,20 @@ export const radioItems = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
         </div>
@@ -222,8 +222,8 @@ export const radioItemsDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -231,20 +231,20 @@ export const radioItemsDisabledItem = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemradio" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio" tabindex="0">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
         </div>
@@ -257,8 +257,8 @@ export const checkboxItems = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -266,20 +266,20 @@ export const checkboxItems = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
         </div>
@@ -292,8 +292,8 @@ export const checkboxItemsDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -301,20 +301,20 @@ export const checkboxItemsDisabledItem = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-tick-small"></use>
+                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-tick-16"></use>
                 </svg>
             </div>
         </div>
@@ -327,8 +327,8 @@ export const longOptionText = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -353,32 +353,32 @@ export const menuIcons = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
     <div class="menu-button__menu">
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--settings" focusable="false" aria-label="Settings" role="icon">
-                    <use href="#icon-settings"></use>
+                <svg class="icon icon--settings-24" focusable="false" aria-label="Settings" role="icon">
+                    <use href="#icon-settings-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
                     Profile
                 </span>
             </div>
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--calendar" focusable="false" aria-label="Calendar" role="icon">
-                    <use href="#icon-calendar"></use>
+                <svg class="icon icon--calendar-24" focusable="false" aria-label="Calendar" role="icon">
+                    <use href="#icon-calendar-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
                     Calendar
                 </span>
             </div>
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--profile" focusable="false" aria-label="Profile" role="icon">
-                    <use href="#icon-profile"></use>
+                <svg class="icon icon--profile-24" focusable="false" aria-label="Profile" role="icon">
+                    <use href="#icon-profile-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
                     Profile
@@ -394,8 +394,8 @@ export const separator = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>

package/src/less/menu-button/stories/cascade.stories.js

@@ -6,8 +6,8 @@ export const RTL = () => `
     <button class="btn btn--secondary" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -34,8 +34,8 @@ export const colour = () => `
         <button class="btn" aria-expanded="true" aria-haspopup="true" style="background-color: #6a29b9; color: white" type="button">
             <span class="btn__cell">
                 <span class="btn__text">Button</span>
-                <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
         </button>
@@ -62,8 +62,8 @@ export const fontSize = () => `
         <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
             <span class="btn__cell">
                 <span class="btn__text">Button</span>
-                <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-dropdown"></use>
+                <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
         </button>
@@ -71,20 +71,20 @@ export const fontSize = () => `
             <div class="menu-button__items" role="menu">
                 <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                     <span>Item 10000</span>
-                    <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                        <use href="#icon-tick-small"></use>
+                    <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                        <use href="#icon-tick-16"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 20000</span>
-                    <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                        <use href="#icon-tick-small"></use>
+                    <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                        <use href="#icon-tick-16"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 30000</span>
-                    <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                        <use href="#icon-tick-small"></use>
+                    <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                        <use href="#icon-tick-16"></use>
                     </svg>
                 </div>
             </div>

package/src/less/menu-button/stories/dimensions.stories.js

@@ -5,8 +5,8 @@ export const fixedWidth = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>

package/src/less/menu-button/stories/fake-menu-button.stories.js

@@ -5,8 +5,8 @@ export const links = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -35,8 +35,8 @@ export const linksSelected = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -44,8 +44,8 @@ export const linksSelected = () => `
         <li>
         <a aria-current="page" class="fake-menu-button__item" href="http://www.ebay.com">
             <span>Link 1</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-tick-16"></use>
             </svg>
         </a>
         </li>
@@ -68,8 +68,8 @@ export const linksDisabled = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>
@@ -77,8 +77,8 @@ export const linksDisabled = () => `
         <li>
         <a aria-current="page" class="fake-menu-button__item">
             <span>Link 1</span>
-            <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-tick-small"></use>
+            <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-tick-16"></use>
             </svg>
         </a>
         </li>
@@ -101,8 +101,8 @@ export const linksFixedWidth = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</span>
-            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-dropdown"></use>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
     </button>

package/src/less/mixins/private/bubble-mixins.less

@@ -1,4 +1,4 @@
-// this mixin is used by infotip, tooltip, tourtip
+// this mixin is used by infotip, tooltip, tourtip, date-textbox
 
 :root {
     --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15))

package/src/less/page-grid/page-grid.less

@@ -1,59 +1,72 @@
 @import "../variables/variables.less";
 
 :root {
-    --page-grid-gutter-width-small: @page-grid-gutter-width-small;
-    --page-grid-gutter-width-large: @page-grid-gutter-width-large;
-    --page-grid-col-width-small: calc(
-        (100% / @page-grid-cols-small) - var(--page-grid-gutter-width-small) + 1px
+    --page-grid-number-cols: @_page-grid-number-cols-small;
+    --page-grid-outside-margins: @_page-grid-outside-margins-small;
+    --page-grid-column-gaps: @_page-grid-column-gaps-small;
+    --page-grid-row-gaps: @_page-grid-row-gaps-large;
+    --page-grid-column-widths: calc(
+        (100% / @_page-grid-number-cols-small) - @_page-grid-column-gaps-small + 1px
     );
-    --page-grid-col-width-large: calc(
-        (100% / @page-grid-cols-large) - var(--page-grid-gutter-width-large) + 1px
+    --page-grid-max-width: @_page-grid-max-width;
+    // TODO: determine if needed. This is the max width inclusive of outside margins (not currently used)
+    --page-grid-total-max-width: calc(
+        var(--page-grid-max-width) + (var(--page-grid-outside-margins) * 2)
     );
+
+    @media screen and (min-width: @_screen-size-SM) {
+        --page-grid-number-cols: @_page-grid-number-cols-large;
+        --page-grid-column-gaps: @_page-grid-column-gaps-large;
+        --page-grid-column-widths: calc(
+            (100% / @_page-grid-number-cols-large) - @_page-grid-column-gaps-large + 1px
+        );
+        --page-grid-outside-margins: @_page-grid-outside-margins-large;
+    }
+
+    @media screen and (min-width: @_screen-size-XL) {
+        --page-grid-outside-margins: @_page-grid-outside-margins-max;
+    }
 }
 
+/* Mobile-first implies defaults, there is no "first" breakpoint,
+   and we don't need a minimum viewport width to support. */
 .page-grid-container {
-    display: flex;
-    justify-content: center;
-    margin: 0 @spacing-200;
+    box-sizing: border-box;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--page-grid-max-width);
+    padding-left: var(--page-grid-outside-margins);
+    padding-right: var(--page-grid-outside-margins);
+    position: relative;
+    width: 100%;
+
+    // handle any nested instances
+    & & {
+        max-width: 100%;
+        padding: 0;
+        width: 100%;
+    }
 }
 
 .page-grid {
-    column-gap: var(--page-grid-gutter-width-small);
+    column-gap: var(--page-grid-column-gaps);
     display: grid;
-    grid-template-columns: repeat(@page-grid-cols-small, var(--page-grid-col-width-small));
-    row-gap: @spacing-200;
-    width: ~"min(100%, 1280px)"; // https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc
+    grid-template-columns: repeat(var(--page-grid-number-cols), var(--page-grid-column-widths));
+    row-gap: var(--page-grid-row-gaps);
 }
 
 /* prettier-ignore */
 .page-grid--debug {
-    --debug-grid-col-color: var(--color-background-secondary);
+    --debug-grid-col-color: pink;
     --debug-grid-gutter-color: transparent;
 
     /* stylelint-disable-next-line */
     background: repeating-linear-gradient(
         90deg,
         var(--debug-grid-col-color) 0,
-        var(--debug-grid-col-color) var(--page-grid-col-width-small),
-        var(--debug-grid-gutter-color) var(--page-grid-col-width-small),
-        var(--debug-grid-gutter-color) calc(var(--page-grid-col-width-small) + var(--page-grid-gutter-width-small))
+        var(--debug-grid-col-color) var(--page-grid-column-widths),
+        var(--debug-grid-gutter-color) var(--page-grid-column-widths),
+        var(--debug-grid-gutter-color) calc(var(--page-grid-column-widths) + var(--page-grid-column-gaps))
     );
 }
-
-@media @breakpoint-3 {
-    .page-grid {
-        column-gap: var(--page-grid-gutter-width-large);
-        grid-template-columns: repeat(@page-grid-cols-large, var(--page-grid-col-width-large));
-    }
-
-    /* prettier-ignore */
-    .page-grid--debug {
-        background: repeating-linear-gradient(
-            90deg,
-            var(--debug-grid-col-color) 0,
-            var(--debug-grid-col-color) var(--page-grid-col-width-large),
-            var(--debug-grid-gutter-color) var(--page-grid-col-width-large),
-            var(--debug-grid-gutter-color) calc(var(--page-grid-col-width-large) + var(--page-grid-gutter-width-large))
-        );
-    }
-}