@ebay/skin 18.6.0 → 19.1.0

package/dist/bundles/skin-default.css

@@ -236,13 +236,21 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
   --color-foreground-on-confirmation:var(--color-neutral-100);
   --color-foreground-on-information:var(--color-neutral-100);
   --color-foreground-on-strong:var(--color-neutral-100);
+  --color-foreground-link-visited:var(--color-pink-600);
+  --color-foreground-link-legal:var(--color-foreground-accent);
+  --color-foreground-link-primary:var(--color-foreground-primary);
   --color-stroke-default:var(--color-neutral-500);
   --color-stroke-accent:var(--color-blue-500);
-  --color-stroke-attention:var(--color-red-500);
+  --color-stroke-on-accent:var(--color-neutral-100);
+  --color-stroke-attention:var(--color-red-600);
+  --color-stroke-on-attention:var(--color-neutral-100);
   --color-stroke-confirmation:var(--color-kiwi-600);
+  --color-stroke-on-confirmation:var(--color-neutral-100);
   --color-stroke-information:var(--color-blue-500);
   --color-stroke-disabled:var(--color-neutral-400);
+  --color-stroke-on-disabled:var(--color-neutral-100);
   --color-stroke-strong:var(--color-neutral-800);
+  --color-stroke-inverse:var(--color-neutral-100);
   --color-stroke-subtle:var(--color-neutral-300);
   --color-state-visited:var(--color-pink-600);
   --color-state-focus-stroke:#005fcc;
@@ -395,22 +403,40 @@ https://github.com/eBay/skin/blob/master/LICENSE.txt
       var(--color-ai-solid-green-subtle) 100%
   );
   --color-media-disabled-filter:grayscale(1) opacity(0.25);
+  --motion-easing-standard:cubic-bezier(0.3, 0, 0, 1);
+  --motion-easing-quick-enter:cubic-bezier(0, 0, 0, 1);
+  --motion-easing-quick-exit:cubic-bezier(1, 0, 0, 1);
+  --motion-easing-soft-enter:cubic-bezier(0, 0, 0.7, 1);
+  --motion-easing-soft-exit:cubic-bezier(0.3, 0, 1, 1);
+  --motion-easing-continuous:cubic-bezier(0.3, 0, 0.7, 1);
+  --motion-easing-bounce:cubic-bezier(0.3, 0, 0, 1.5);
+  --motion-easing-linear:cubic-bezier(0, 0, 1, 1);
+  --motion-duration-instant:17ms;
+  --motion-duration-short-1:50ms;
+  --motion-duration-short-2:83ms;
+  --motion-duration-short-3:167ms;
+  --motion-duration-medium-1:250ms;
+  --motion-duration-medium-2:333ms;
+  --motion-duration-medium-3:500ms;
+  --motion-duration-long-1:667ms;
+  --motion-duration-long-2:883ms;
+  --motion-duration-long-3:1000ms;
 }
 @font-face{
   font-display:swap;
   font-family:Market Sans;
   font-style:normal;
   font-weight:400;
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.eot);
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.eot?#iefix) format("embedded-opentype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.woff2) format("woff2"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.woff) format("woff"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.ttf) format("truetype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS) format("svg");
+  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.eot);
+  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.eot?#iefix) format("embedded-opentype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.woff2) format("woff2"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.woff) format("woff"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.ttf) format("truetype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Regular-WebS.svg#MarketSans-Regular-WebS) format("svg");
 }
 @font-face{
   font-display:swap;
   font-family:Market Sans;
   font-style:normal;
   font-weight:700;
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.eot);
-  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.eot?#iefix) format("embedded-opentype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.woff2) format("woff2"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.woff) format("woff"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.ttf) format("truetype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/MarketSans-SemiBold-WebS.svg#MarketSans-SemiBold-WebS) format("svg");
+  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.eot);
+  src:url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.eot?#iefix) format("embedded-opentype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.woff2) format("woff2"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.woff) format("woff"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.ttf) format("truetype"), url(https://ir.ebaystatic.com/cr/v/c1/market-sans/v2.0/MarketSans-Bold-WebS.svg#MarketSans-Bold-WebS) format("svg");
 }
 body{
   background-color:var(--color-background-primary);
@@ -430,10 +456,10 @@ legend{
 }
 
 a{
-  color:var(--link-foreground-color-default, var(--color-foreground-primary));
+  color:var(--link-foreground-color-default, var(--color-foreground-link-primary));
 }
 a:visited{
-  color:var(--link-foreground-color-visited, var(--color-foreground-visited));
+  color:var(--link-foreground-color-visited, var(--color-foreground-link-visited));
 }
 a:hover{
   color:var(--link-foreground-color-hover, var(--color-foreground-secondary));
@@ -598,7 +624,7 @@ ul.accordion details .details__content{
   opacity:0;
   transform:scaleY(0);
   transform-origin:top;
-  transition:opacity .5s cubic-bezier(.3, 0, 0, 1),transform .5s cubic-bezier(.3, 0, 0, 1);
+  transition:opacity var(--motion-duration-medium-3) var(--motion-easing-standard), transform var(--motion-duration-medium-3) var(--motion-easing-standard);
 }
 
 ul.accordion details[open] .details__content{
@@ -725,9 +751,7 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
 }
 .avatar{
   align-items:center;
-  background-color:#84b4fb;
   border-radius:50%;
-  color:#002a69;
   display:inline-flex;
   font-size:var(--font-size-large-2);
   font-weight:var(--font-weight-bold);
@@ -735,8 +759,26 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   justify-content:center;
   line-height:48px;
   overflow:hidden;
+  position:relative;
   width:48px;
 }
+.avatar:after{
+  background:rgba(0, 0, 0, .05);
+  bottom:0;
+  content:"";
+  display:block;
+  left:0;
+  pointer-events:none;
+  position:absolute;
+  right:0;
+  top:0;
+}
+.avatar>img{
+  display:inline-block;
+  max-height:100%;
+  max-width:100%;
+  object-fit:contain;
+}
 
 .avatar>svg{
   height:100%;
@@ -749,6 +791,10 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
   width:48px;
 }
 
+.avatar--fit>img{
+  object-fit:contain;
+}
+
 .avatar--teal{
   background-color:#84b4fb;
   color:#002a69;
@@ -840,6 +886,7 @@ ul.accordion details svg.details__collapse,ul.accordion details[open] svg.detail
 .badge{
   align-items:center;
   background-color:var(--badge-background-color, var(--color-background-attention));
+  border:2px solid var(--color-stroke-on-attention);
   border-radius:16px;
   color:var(--badge-foreground-color, var(--color-foreground-on-attention));
   display:inline-flex;
@@ -2110,7 +2157,7 @@ button.chip__button>svg{
   transition:transform .2s linear;
 }
 
-.chips-combobox .combobox__listbox{
+.chips-combobox .combobox__listbox--set-position{
   top:calc(100% + var(--spacing-150));
 }
 
@@ -2187,12 +2234,17 @@ span.combobox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.combobox__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 
 .combobox__listbox--reverse,[dir=rtl] .combobox__listbox{
@@ -2615,6 +2667,7 @@ a.cta-btn--large{
 }
 .date-textbox{
   --calendar-month-width:311px;
+  display:inline-block;
 }
 
 .date-textbox>.textbox+.textbox{
@@ -2780,6 +2833,7 @@ details.details summary:focus:not(:focus-visible){
     }
   }
 }
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .drawer-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -3948,22 +4002,25 @@ button.filter-menu-button__button[aria-pressed=true][aria-disabled=true]:hover,b
   border-radius:16px;
   box-shadow:var(--bubble-shadow);
   display:none;
-  max-width:288px;
   min-width:144px;
   overflow:hidden;
   position:absolute;
-  top:calc(100% + 8px);
+  top:0;
   width:max-content;
   z-index:1;
 }
 
+.filter-menu-button__menu--set-position{
+  top:calc(100% + 8px);
+}
+
 button.filter-menu-button__button[aria-expanded=true]+.filter-menu-button__menu{
   display:block;
 }
 
 .filter-menu-button__items{
   margin-top:8px;
-  max-height:calc(50vh - 40px);
+  max-height:400px;
   min-width:100%;
   overflow-y:auto;
   position:relative;
@@ -5261,6 +5318,8 @@ label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofil
 .floating-label--large label.floating-label__label.floating-label__label--inline:has(+.textbox>:autofill){
   transform:scale(.75) translateY(3px);
 }
+
+/*! DEPRECATED COMPONENT. Will be removed next major version */
 .fullscreen-dialog[role=dialog]{
   background-color:var(--dialog-scrim-color-show);
   bottom:0;
@@ -5726,8 +5785,9 @@ span.infotip__mask{
 
 .infotip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 
 .infotip__content{
@@ -5872,226 +5932,1124 @@ span.inline-notice{
 .inline-notice a,.inline-notice button.fake-link{
   color:var(--color-foreground-primary);
 }
-:root{
-  --dialog-lightbox-wide-max-width:896px;
-  --dialog-lightbox-narrow-max-width:480px;
-}
-
-.lightbox-dialog[role=dialog]{
-  background-color:var(--dialog-scrim-color-show);
-  bottom:0;
-  left:0;
-  -webkit-overflow-scrolling:touch;
-  align-items:flex-start;
-  justify-content:center;
-  overflow-y:auto;
-  position:fixed;
-  right:0;
-  top:0;
-  will-change:background-color;
-  z-index:100000;
-}
-.lightbox-dialog[role=dialog]:not([hidden]){
-  display:flex;
-}
-
-.lightbox-dialog__window{
-  background-color:var(--dialog-window-background-color, var(--color-background-primary));
-  border-radius:var(--lightbox-border-radius, var(--border-radius-150));
-  display:flex;
-  flex:1 0 auto;
-  flex-direction:column;
-  margin:auto auto 16px;
-  max-height:90%;
-  max-width:calc(100% - 32px);
-  min-height:55px;
-  min-width:208px;
-  will-change:opacity, transform;
-}
-
-.lightbox-dialog__header{
-  display:flex;
-  flex-shrink:0;
-  margin:var(--spacing-200) var(--spacing-200) 0;
-  position:relative;
-}
-.lightbox-dialog__header h1,.lightbox-dialog__header h2,.lightbox-dialog__header h3,.lightbox-dialog__header h4,.lightbox-dialog__header h5,.lightbox-dialog__header h6{
-  align-self:center;
-  flex:1 1 auto;
-  margin:0;
-  overflow-wrap:anywhere;
-}
-.lightbox-dialog__header>:last-child:not(:only-child){
-  margin-inline-start:var(--spacing-200);
-}
-
-.lightbox-dialog__main{
-  box-sizing:border-box;
-  flex:1 1 auto;
-  min-height:18px;
-  overflow:auto;
-  padding:var(--spacing-200);
-  position:relative;
-}
-.lightbox-dialog__main>:first-child{
-  margin-top:0;
-}
-.lightbox-dialog__main>:last-child{
-  margin-bottom:0;
-}
-
-.lightbox-dialog__footer{
-  border-top:1px solid var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
-  display:flex;
-  flex-direction:column;
-  justify-content:center;
-  padding:var(--spacing-200);
-  position:relative;
-}
-.lightbox-dialog__footer>:not(:first-child){
-  margin-top:var(--spacing-200);
-}
-
-.lightbox-dialog__image{
-  background-position:50%;
-  background-repeat:no-repeat;
-  background-size:cover;
-  border-radius:var(--border-radius-100) var(--border-radius-100) 0 0;
-  height:218px;
-  position:absolute;
-  width:100%;
+.layout-grid{
+  --layout-grid-cell-height-min:0;
+  --layout-grid-cell-gap:var(--spacing-100);
+  --layout-grid-columns-min:1;
+  --layout-grid-columns-xs:2;
+  --layout-grid-columns-sm:3;
+  --layout-grid-columns-md:4;
+  --layout-grid-columns-lg:6;
+  --layout-grid-columns-xl:8;
+  --layout-grid-columns-xl2:10;
+  --layout-grid-columns-xl3:12;
+  --layout-grid-columns-xl4:14;
+  container:layout-grid-container/inline-size;
 }
 
-.lightbox-dialog--expressive .lightbox-dialog__window{
-  padding-bottom:var(--spacing-100);
+.layout-grid[data-columns-min="1"]>ul{
+  grid-template-columns:repeat(1, 1fr);
 }
 
-.lightbox-dialog--expressive .lightbox-dialog__header>*{
-  margin-top:218px;
+.layout-grid[data-columns-min="2"]>ul{
+  grid-template-columns:repeat(2, 1fr);
 }
 
-.lightbox-dialog--expressive .lightbox-dialog__header{
-  margin:var(--spacing-300) var(--spacing-300) 0;
+.layout-grid[data-columns-min="3"]>ul{
+  grid-template-columns:repeat(3, 1fr);
 }
 
-.lightbox-dialog--expressive .lightbox-dialog__footer,.lightbox-dialog--expressive .lightbox-dialog__main{
-  padding:var(--spacing-200) var(--spacing-300);
-}
-button.icon-btn.lightbox-dialog__close,button.icon-btn.lightbox-dialog__prev{
-  align-self:flex-start;
-  border:0;
-  height:32px;
-  min-width:32px;
-  position:relative;
-  width:32px;
-  z-index:1;
+.layout-grid[data-columns-min="4"]>ul{
+  grid-template-columns:repeat(4, 1fr);
 }
 
-button.icon-btn.lightbox-dialog__prev{
-  margin-inline-end:var(--spacing-200);
+@container layout-grid-container (inline-size < 320px){
+  .layout-grid[data-columns-min="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-min="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-min="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-min="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
 }
-
-.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev{
-  align-self:self-start;
+.layout-grid>ul{
+  display:grid;
+  gap:var(--layout-grid-cell-gap);
+  grid-auto-rows:1fr;
+  grid-template-columns:repeat(var(--layout-grid-columns-min), 1fr);
   margin:0;
+  padding:0;
+  width:100%;
 }
 
-.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev+*{
-  margin-left:-32px;
-}
-
-.lightbox-dialog__title:not(:first-child){
-  margin-left:var(--spacing-200);
-}
-
-.lightbox-dialog__title--center{
-  text-align:center;
-}
-
-.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade{
-  transition:background-color .16s ease-out;
-}
-.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
-  transition:background-color .32s ease-out;
-}
-.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
-  transition:opacity .16s ease-out;
-}
-.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
-  transition:opacity .16s ease-out,transform .32s ease-out;
-}
-
-.lightbox-dialog--hide.lightbox-dialog--hide,.lightbox-dialog--hide.lightbox-dialog--show-init,.lightbox-dialog--show-init.lightbox-dialog--hide,.lightbox-dialog--show-init.lightbox-dialog--show-init{
-  display:flex;
-}
-.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show-init.lightbox-dialog--mask-fade,.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow{
-  background-color:var(--dialog-scrim-color-hide);
-}
-.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
-  opacity:0;
-}
-.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
-  opacity:0;
-  transform:translateY(100%);
-}
-
-.lightbox-dialog--hide-init.lightbox-dialog--hide-init,.lightbox-dialog--hide-init.lightbox-dialog--show,.lightbox-dialog--show.lightbox-dialog--hide-init,.lightbox-dialog--show.lightbox-dialog--show{
-  display:flex;
-}
-.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
-  background-color:var(--dialog-scrim-color-show);
-}
-.lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
-  opacity:1;
-}
-.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
-  opacity:1;
-  transform:translateY(0);
+.layout-grid>ul>li{
+  display:inline-block;
+  min-height:var(--layout-grid-cell-height-min);
+  width:100%;
 }
 
-.lightbox-dialog__handle{
-  background-color:initial;
-  border:none;
-  left:0;
-  margin:-11px auto;
-  padding:8px;
-  position:relative;
-  right:0;
-  top:11px;
-  z-index:2;
-}
-.lightbox-dialog__handle:after{
-  background-color:var(--dialog-handle-color, var(--color-stroke-default));
-  border-radius:3px;
+.layout-grid>ul>li::marker{
   content:"";
-  display:block;
-  height:2px;
-  width:24px;
-}
-
-.lightbox-dialog__window--expanded{
-  height:95%;
-  max-height:95%;
-}
-
-[dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16{
-  transform:rotate(180deg);
-}
-
-.lightbox-dialog--fullscreen .lightbox-dialog__window,.lightbox-dialog--large .lightbox-dialog__window{
-  align-self:center;
-  height:70%;
-  margin:var(--spacing-100);
-  max-height:95%;
+  font-size:0;
 }
-
-@media (max-width:512px){
-  .lightbox-dialog--large .lightbox-dialog__window{
-    height:95%;
-    max-height:95%;
-    width:100%;
-  }
-  .lightbox-dialog--fullscreen .lightbox-dialog__window{
+@supports not (contain:inline-size){
+  @media (min-width:320px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-xs), 1fr);
+    }
+    .layout-grid[data-columns-xs="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-xs="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-xs="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-xs="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-xs="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-xs="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-xs="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-xs="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-xs="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-xs="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-xs="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-xs="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-xs="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-xs="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-xs="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-xs="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+  @media (min-width:512px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-sm), 1fr);
+    }
+    .layout-grid[data-columns-sm="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-sm="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-sm="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-sm="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-sm="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-sm="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-sm="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-sm="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-sm="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-sm="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-sm="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-sm="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-sm="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-sm="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-sm="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-sm="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+  @media (min-width:768px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-md), 1fr);
+    }
+    .layout-grid[data-columns-md="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-md="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-md="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-md="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-md="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-md="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-md="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-md="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-md="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-md="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-md="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-md="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-md="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-md="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-md="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-md="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+  @media (min-width:1024px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-lg), 1fr);
+    }
+    .layout-grid[data-columns-lg="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-lg="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-lg="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-lg="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-lg="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-lg="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-lg="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-lg="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-lg="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-lg="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-lg="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-lg="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-lg="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-lg="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-lg="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-lg="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+  @media (min-width:1280px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-xl), 1fr);
+    }
+    .layout-grid[data-columns-xl="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-xl="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-xl="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-xl="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-xl="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-xl="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-xl="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-xl="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-xl="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-xl="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-xl="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-xl="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-xl="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-xl="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-xl="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-xl="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+  @media (min-width:1440px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-xl2), 1fr);
+    }
+    .layout-grid[data-columns-xl2="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-xl2="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-xl2="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-xl2="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-xl2="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-xl2="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-xl2="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-xl2="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-xl2="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-xl2="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-xl2="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-xl2="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-xl2="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-xl2="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-xl2="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-xl2="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+  @media (min-width:1680px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-xl3), 1fr);
+    }
+    .layout-grid[data-columns-xl3="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-xl3="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-xl3="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-xl3="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-xl3="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-xl3="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-xl3="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-xl3="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-xl3="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-xl3="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-xl3="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-xl3="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-xl3="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-xl3="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-xl3="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-xl3="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+  @media (min-width:1920px){
+    .layout-grid>ul{
+      grid-template-columns:repeat(var(--layout-grid-columns-xl4), 1fr);
+    }
+    .layout-grid[data-columns-xl4="1"]>ul{
+      grid-template-columns:repeat(1, 1fr);
+    }
+    .layout-grid[data-columns-xl4="2"]>ul{
+      grid-template-columns:repeat(2, 1fr);
+    }
+    .layout-grid[data-columns-xl4="3"]>ul{
+      grid-template-columns:repeat(3, 1fr);
+    }
+    .layout-grid[data-columns-xl4="4"]>ul{
+      grid-template-columns:repeat(4, 1fr);
+    }
+    .layout-grid[data-columns-xl4="5"]>ul{
+      grid-template-columns:repeat(5, 1fr);
+    }
+    .layout-grid[data-columns-xl4="6"]>ul{
+      grid-template-columns:repeat(6, 1fr);
+    }
+    .layout-grid[data-columns-xl4="7"]>ul{
+      grid-template-columns:repeat(7, 1fr);
+    }
+    .layout-grid[data-columns-xl4="8"]>ul{
+      grid-template-columns:repeat(8, 1fr);
+    }
+    .layout-grid[data-columns-xl4="9"]>ul{
+      grid-template-columns:repeat(9, 1fr);
+    }
+    .layout-grid[data-columns-xl4="10"]>ul{
+      grid-template-columns:repeat(10, 1fr);
+    }
+    .layout-grid[data-columns-xl4="11"]>ul{
+      grid-template-columns:repeat(11, 1fr);
+    }
+    .layout-grid[data-columns-xl4="12"]>ul{
+      grid-template-columns:repeat(12, 1fr);
+    }
+    .layout-grid[data-columns-xl4="13"]>ul{
+      grid-template-columns:repeat(13, 1fr);
+    }
+    .layout-grid[data-columns-xl4="14"]>ul{
+      grid-template-columns:repeat(14, 1fr);
+    }
+    .layout-grid[data-columns-xl4="15"]>ul{
+      grid-template-columns:repeat(15, 1fr);
+    }
+    .layout-grid[data-columns-xl4="16"]>ul{
+      grid-template-columns:repeat(16, 1fr);
+    }
+  }
+}
+@container layout-grid-container (inline-size >= 320px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-xs), 1fr);
+  }
+  .layout-grid[data-columns-xs="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-xs="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-xs="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-xs="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-xs="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-xs="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-xs="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-xs="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-xs="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-xs="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-xs="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-xs="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-xs="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-xs="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-xs="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-xs="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+@container layout-grid-container (inline-size >= 512px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-sm), 1fr);
+  }
+  .layout-grid[data-columns-sm="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-sm="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-sm="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-sm="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-sm="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-sm="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-sm="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-sm="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-sm="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-sm="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-sm="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-sm="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-sm="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-sm="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-sm="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-sm="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+@container layout-grid-container (inline-size >= 768px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-md), 1fr);
+  }
+  .layout-grid[data-columns-md="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-md="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-md="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-md="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-md="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-md="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-md="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-md="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-md="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-md="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-md="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-md="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-md="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-md="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-md="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-md="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+@container layout-grid-container (inline-size >= 1024px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-lg), 1fr);
+  }
+  .layout-grid[data-columns-lg="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-lg="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-lg="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-lg="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-lg="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-lg="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-lg="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-lg="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-lg="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-lg="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-lg="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-lg="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-lg="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-lg="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-lg="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-lg="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+@container layout-grid-container (inline-size >= 1280px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-xl), 1fr);
+  }
+  .layout-grid[data-columns-xl="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-xl="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-xl="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-xl="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-xl="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-xl="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-xl="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-xl="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-xl="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-xl="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-xl="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-xl="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-xl="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-xl="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-xl="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-xl="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+@container layout-grid-container (inline-size >= 1440px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-xl), 1fr);
+  }
+  .layout-grid[data-columns-xl2="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-xl2="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-xl2="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-xl2="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-xl2="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-xl2="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-xl2="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-xl2="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-xl2="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-xl2="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-xl2="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-xl2="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-xl2="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-xl2="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-xl2="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-xl2="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+@container layout-grid-container (inline-size >= 1680px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-xl3), 1fr);
+  }
+  .layout-grid[data-columns-xl3="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-xl3="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-xl3="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-xl3="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-xl3="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-xl3="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-xl3="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-xl3="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-xl3="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-xl3="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-xl3="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-xl3="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-xl3="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-xl3="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-xl3="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-xl3="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+@container layout-grid-container (inline-size >= 1920px){
+  .layout-grid>ul{
+    grid-template-columns:repeat(var(--layout-grid-columns-xl4), 1fr);
+  }
+  .layout-grid[data-columns-xl4="1"]>ul{
+    grid-template-columns:repeat(1, 1fr);
+  }
+  .layout-grid[data-columns-xl4="2"]>ul{
+    grid-template-columns:repeat(2, 1fr);
+  }
+  .layout-grid[data-columns-xl4="3"]>ul{
+    grid-template-columns:repeat(3, 1fr);
+  }
+  .layout-grid[data-columns-xl4="4"]>ul{
+    grid-template-columns:repeat(4, 1fr);
+  }
+  .layout-grid[data-columns-xl4="5"]>ul{
+    grid-template-columns:repeat(5, 1fr);
+  }
+  .layout-grid[data-columns-xl4="6"]>ul{
+    grid-template-columns:repeat(6, 1fr);
+  }
+  .layout-grid[data-columns-xl4="7"]>ul{
+    grid-template-columns:repeat(7, 1fr);
+  }
+  .layout-grid[data-columns-xl4="8"]>ul{
+    grid-template-columns:repeat(8, 1fr);
+  }
+  .layout-grid[data-columns-xl4="9"]>ul{
+    grid-template-columns:repeat(9, 1fr);
+  }
+  .layout-grid[data-columns-xl4="10"]>ul{
+    grid-template-columns:repeat(10, 1fr);
+  }
+  .layout-grid[data-columns-xl4="11"]>ul{
+    grid-template-columns:repeat(11, 1fr);
+  }
+  .layout-grid[data-columns-xl4="12"]>ul{
+    grid-template-columns:repeat(12, 1fr);
+  }
+  .layout-grid[data-columns-xl4="13"]>ul{
+    grid-template-columns:repeat(13, 1fr);
+  }
+  .layout-grid[data-columns-xl4="14"]>ul{
+    grid-template-columns:repeat(14, 1fr);
+  }
+  .layout-grid[data-columns-xl4="15"]>ul{
+    grid-template-columns:repeat(15, 1fr);
+  }
+  .layout-grid[data-columns-xl4="16"]>ul{
+    grid-template-columns:repeat(16, 1fr);
+  }
+}
+:root{
+  --dialog-lightbox-wide-max-width:896px;
+  --dialog-lightbox-narrow-max-width:480px;
+}
+
+.lightbox-dialog[role=dialog]{
+  background-color:var(--dialog-scrim-color-show);
+  bottom:0;
+  left:0;
+  -webkit-overflow-scrolling:touch;
+  align-items:flex-start;
+  justify-content:center;
+  overflow-y:auto;
+  position:fixed;
+  right:0;
+  top:0;
+  will-change:background-color;
+  z-index:100000;
+}
+.lightbox-dialog[role=dialog]:not([hidden]){
+  display:flex;
+}
+
+.lightbox-dialog__window{
+  background-color:var(--dialog-window-background-color, var(--color-background-primary));
+  border-radius:var(--lightbox-border-radius, var(--border-radius-150));
+  display:flex;
+  flex:1 0 auto;
+  flex-direction:column;
+  margin:auto auto 16px;
+  max-height:90%;
+  max-width:calc(100% - 32px);
+  min-height:55px;
+  min-width:208px;
+  will-change:opacity, transform;
+}
+
+.lightbox-dialog__header{
+  display:flex;
+  flex-shrink:0;
+  margin:var(--spacing-200) var(--spacing-200) 0;
+  position:relative;
+}
+.lightbox-dialog__header h1,.lightbox-dialog__header h2,.lightbox-dialog__header h3,.lightbox-dialog__header h4,.lightbox-dialog__header h5,.lightbox-dialog__header h6{
+  align-self:center;
+  flex:1 1 auto;
+  margin:0;
+  overflow-wrap:anywhere;
+}
+.lightbox-dialog__header>:last-child:not(:only-child){
+  margin-inline-start:var(--spacing-200);
+}
+
+.lightbox-dialog__main{
+  box-sizing:border-box;
+  flex:1 1 auto;
+  min-height:18px;
+  overflow:auto;
+  padding:var(--spacing-200);
+  position:relative;
+}
+.lightbox-dialog__main>:first-child{
+  margin-top:0;
+}
+.lightbox-dialog__main>:last-child{
+  margin-bottom:0;
+}
+
+.lightbox-dialog__footer{
+  border-top:1px solid var(--dialog-lightbox-separator-color, var(--color-stroke-subtle));
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  padding:var(--spacing-200);
+  position:relative;
+}
+.lightbox-dialog__footer>:not(:first-child){
+  margin-top:var(--spacing-200);
+}
+
+.lightbox-dialog__image{
+  background-position:50%;
+  background-repeat:no-repeat;
+  background-size:cover;
+  border-radius:var(--border-radius-100) var(--border-radius-100) 0 0;
+  height:218px;
+  position:absolute;
+  width:100%;
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__window{
+  padding-bottom:var(--spacing-100);
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__header>*{
+  margin-top:218px;
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__header{
+  margin:var(--spacing-300) var(--spacing-300) 0;
+}
+
+.lightbox-dialog--expressive .lightbox-dialog__footer,.lightbox-dialog--expressive .lightbox-dialog__main{
+  padding:var(--spacing-200) var(--spacing-300);
+}
+button.icon-btn.lightbox-dialog__close,button.icon-btn.lightbox-dialog__prev{
+  align-self:flex-start;
+  border:0;
+  height:32px;
+  min-width:32px;
+  position:relative;
+  width:32px;
+  z-index:1;
+}
+
+button.icon-btn.lightbox-dialog__prev{
+  margin-inline-end:var(--spacing-200);
+}
+
+.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__close,.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev{
+  align-self:self-start;
+  margin:0;
+}
+
+.lightbox-dialog--expressive button.icon-btn.lightbox-dialog__prev+*{
+  margin-left:-32px;
+}
+
+.lightbox-dialog__title:not(:first-child){
+  margin-left:var(--spacing-200);
+}
+
+.lightbox-dialog__title--center{
+  text-align:center;
+}
+
+.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade{
+  transition:background-color .16s ease-out;
+}
+.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
+  transition:background-color .32s ease-out;
+}
+.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
+  transition:opacity .16s ease-out;
+}
+.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
+  transition:opacity .16s ease-out,transform .32s ease-out;
+}
+
+.lightbox-dialog--hide.lightbox-dialog--hide,.lightbox-dialog--hide.lightbox-dialog--show-init,.lightbox-dialog--show-init.lightbox-dialog--hide,.lightbox-dialog--show-init.lightbox-dialog--show-init{
+  display:flex;
+}
+.lightbox-dialog--hide.lightbox-dialog--mask-fade,.lightbox-dialog--hide.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show-init.lightbox-dialog--mask-fade,.lightbox-dialog--show-init.lightbox-dialog--mask-fade-slow{
+  background-color:var(--dialog-scrim-color-hide);
+}
+.lightbox-dialog--hide .lightbox-dialog__window--fade,.lightbox-dialog--show-init .lightbox-dialog__window--fade{
+  opacity:0;
+}
+.lightbox-dialog--hide .lightbox-dialog__window--animate,.lightbox-dialog--show-init .lightbox-dialog__window--animate{
+  opacity:0;
+  transform:translateY(100%);
+}
+
+.lightbox-dialog--hide-init.lightbox-dialog--hide-init,.lightbox-dialog--hide-init.lightbox-dialog--show,.lightbox-dialog--show.lightbox-dialog--hide-init,.lightbox-dialog--show.lightbox-dialog--show{
+  display:flex;
+}
+.lightbox-dialog--hide-init.lightbox-dialog--mask-fade,.lightbox-dialog--hide-init.lightbox-dialog--mask-fade-slow,.lightbox-dialog--show.lightbox-dialog--mask-fade,.lightbox-dialog--show.lightbox-dialog--mask-fade-slow{
+  background-color:var(--dialog-scrim-color-show);
+}
+.lightbox-dialog--hide-init .lightbox-dialog__window--fade,.lightbox-dialog--show .lightbox-dialog__window--fade{
+  opacity:1;
+}
+.lightbox-dialog--hide-init .lightbox-dialog__window--animate,.lightbox-dialog--show .lightbox-dialog__window--animate{
+  opacity:1;
+  transform:translateY(0);
+}
+.lightbox-dialog__handle:after{
+  background-color:var(--dialog-handle-color, var(--color-stroke-default));
+  border-radius:3px;
+  content:"";
+  display:block;
+  height:2px;
+  width:24px;
+}
+
+[dir=rtl] button.icon-btn.lightbox-dialog__prev .icon--16{
+  transform:rotate(180deg);
+}
+
+.lightbox-dialog--fullscreen .lightbox-dialog__window,.lightbox-dialog--large .lightbox-dialog__window{
+  align-self:center;
+  height:70%;
+  margin:var(--spacing-100);
+  max-height:95%;
+}
+
+@media (max-width:512px){
+  .lightbox-dialog--large .lightbox-dialog__window{
+    height:95%;
+    max-height:95%;
+    width:100%;
+  }
+  .lightbox-dialog--fullscreen .lightbox-dialog__window{
     border-radius:0;
     height:100%;
     margin:0;
@@ -6099,9 +7057,6 @@ button.icon-btn.lightbox-dialog__prev{
     max-width:100%;
     width:100%;
   }
-  .lightbox-dialog--fullscreen .lightbox-dialog__handle,.lightbox-dialog--large .lightbox-dialog__handle{
-    display:none;
-  }
 }
 @media (min-width:512px){
   .lightbox-dialog__window{
@@ -6109,9 +7064,6 @@ button.icon-btn.lightbox-dialog__prev{
     margin:auto;
     max-width:calc(88% - var(--spacing-400));
   }
-  .lightbox-dialog__handle{
-    display:none;
-  }
   .lightbox-dialog--narrow .lightbox-dialog__window{
     max-width:var(--dialog-lightbox-narrow-max-width);
   }
@@ -6142,11 +7094,11 @@ button.icon-btn.lightbox-dialog__prev{
   }
 }
 a.nav-link,a.standalone-link{
-  color:var(--nav-link-foreground-color, var(--color-foreground-primary));
+  color:var(--nav-link-foreground-color, var(--color-foreground-link-primary));
   text-decoration:none;
 }
 a.nav-link:visited,a.standalone-link:visited{
-  color:var(--link-foreground-color-default, var(--color-foreground-primary));
+  color:var(--link-foreground-color-default, var(--color-foreground-link-primary));
 }
 a.nav-link:hover,a.standalone-link:hover{
   color:var(--nav-link-foreground-hover-color, var(--color-foreground-secondary));
@@ -6160,7 +7112,7 @@ a.nav-link:not([href]),a.nav-link[aria-disabled=true],a.standalone-link:not([hre
 button.fake-link{
   background-color:initial;
   border:0;
-  color:var(--fake-link-foreground-color, var(--color-foreground-primary));
+  color:var(--fake-link-foreground-color, var(--color-foreground-link-primary));
   font-family:inherit;
   font-size:inherit;
   padding:0;
@@ -6172,16 +7124,27 @@ button.fake-link:hover{
 button.fake-link[aria-disabled=true],button.fake-link[disabled]{
   color:var(--fake-link-foreground-disabled-color, var(--color-foreground-disabled));
 }
+
+a.legal-link,button.legal-link{
+  text-decoration:underline;
+}
+a.legal-link,a.legal-link:hover,a.legal-link:visited,button.legal-link,button.legal-link:hover,button.legal-link:visited{
+  color:var(--legal-link-foreground-color, var(--color-foreground-link-legal));
+}
 .list{
   max-width:480px;
 }
 
 .list ol,.list ul{
-  list-style:none;
   margin:0;
   padding:0;
 }
 
+.list li::marker{
+  content:"";
+  font-size:0;
+}
+
 .list fieldset>*,.list li>*{
   align-items:center;
   background-color:var(--list-background-color, var(--color-background-primary));
@@ -6364,12 +7327,17 @@ div.listbox-button__listbox{
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+div.listbox-button__listbox--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] div.listbox-button__listbox{
   left:unset;
@@ -6693,13 +7661,18 @@ div.menu__item[role^=menuitem]:focus:not(:focus-visible){
   display:none;
   left:0;
   max-height:400px;
-  min-width:100%;
   outline:0;
   overflow-y:auto;
   position:absolute;
+  top:0;
+  width:-moz-fit-content;
+  width:fit-content;
+  z-index:2;
+}
+.fake-menu-button__menu--set-position,.menu-button__menu--set-position{
+  min-width:100%;
   top:calc(100% + 4px);
   width:auto;
-  z-index:2;
 }
 [dir=rtl] .fake-menu-button__menu,[dir=rtl] .menu-button__menu{
   left:unset;
@@ -8600,9 +9573,6 @@ span.skeleton__avatar:not(:last-child),span.skeleton__button:not(:last-child),sp
 div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.skeleton__image:not(:last-child),div.skeleton__text:not(:last-child),div.skeleton__textbox:not(:last-child){
   margin-block-end:var(--spacing-150);
 }
-.skeleton--elevated{
-  --skeleton-background:var(--color-loading-fill-elevated);
-}
 
 .skeleton--on-secondary{
   --skeleton-background:var(--color-loading-fill-on-secondary);
@@ -8612,9 +9582,6 @@ div.skeleton__avatar:not(:last-child),div.skeleton__button:not(:last-child),div.
   .skeleton{
     --skeleton-background:var(--color-loading-shimmer);
   }
-  .skeleton--elevated{
-    --skeleton-background:var(--color-loading-shimmer-elevated);
-  }
   .skeleton--on-secondary{
     --skeleton-background:var(--color-loading-shimmer-on-secondary);
   }
@@ -9073,14 +10040,7 @@ span.switch__control:focus:not(:focus-visible){
   text-align:left;
 }
 
-.table-cell--numeric{
-  text-align:right;
-}
-.table__cell{
-  text-align:left;
-}
-
-.table__cell--numeric{
+.table-cell--numeric,.table__cell--numeric{
   text-align:right;
 }
 
@@ -10454,8 +11414,8 @@ span.tooltip{
 }
 
 .tooltip__mask{
-  background-color:var(--tooltip-background-color, var(--color-background-elevated));
-  color:var(--tooltip-foreground-color, var(--color-foreground-primary));
+  background-color:var(--tooltip-background-color, var(--color-background-inverse));
+  color:var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
   position:relative;
 }
 
@@ -10465,11 +11425,12 @@ span.tooltip__mask{
 
 .tooltip__cell{
   display:flex;
+  overflow-wrap:anywhere;
   padding:var(--spacing-100) var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tooltip__cell a{
-  color:var(--tooltip-foreground-color, var(--color-foreground-primary));
+  color:var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
 }
 .tooltip__cell a:focus{
   outline:1px dashed currentColor;
@@ -10498,7 +11459,7 @@ button.tooltip__close{
 }
 
 .tooltip__pointer{
-  background-color:var(--tooltip-background-color, var(--color-background-elevated));
+  background-color:var(--tooltip-background-color, var(--color-background-inverse));
   height:8px;
   position:absolute;
   transform:rotate(45deg);
@@ -10626,8 +11587,9 @@ span.tourtip__mask{
 .tourtip__cell{
   display:flex;
   flex-wrap:wrap;
+  overflow-wrap:anywhere;
   padding:var(--spacing-200);
-  word-break:break-word;
+  word-break:normal;
 }
 .tourtip__cell a{
   color:var(--tourtip-foreground-color, var(--color-foreground-on-inverse));