@spw-ds/spw-stencil-library 1.14.2 → 1.16.0

package/dist/collection/components/spw-tile/spw-tile-description/spw-tile-description.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }
@@ -361,6 +362,40 @@ template {
 
 :host {
   display: block;
+  overflow: hidden;
+}
+
+:host(.--light),
+:host(.--big) {
+  margin-top: 6px;
+}
+
+@media (max-width: 1023px) {
+  :host(.--reveal-on-hover) {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  :host(.--reveal-on-hover) {
+    display: grid;
+    grid-template-rows: 0fr;
+    margin-top: 0;
+    opacity: 0;
+    transition: grid-template-rows 0.25s ease-in, margin-top 0.25s ease-in, opacity 0.35s 0.05s ease-in;
+  }
+}
+
+@media (min-width: 1024px) {
+  :host(.--reveal-on-hover.--revealed) {
+    grid-template-rows: 1fr;
+    margin-top: 6px;
+    opacity: 1;
+  }
+}
+
+:host(.--reveal-on-hover) .spw-tile-description {
+  min-height: 0;
+  overflow: hidden;
 }
 
 :host(.--icon) .spw-tile-description {

package/dist/collection/components/spw-tile/spw-tile-description/spw-tile-description.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileDescription {
     render() {
-        return (h("div", { key: 'd455a13d393ef8b2f3ae0b9b541f1b8dceafc902', class: "spw-tile-description" }, h("slot", { key: '9291788b57b07ea1ec2a9fd671e2cb8d1ce0e702' })));
+        return (h("div", { key: '3d9b003f759787e34582178117a40aa86beb62d5', class: "spw-tile-description" }, h("slot", { key: '5ad0c5d8d9d9e776cff00017784bde5b59502d1e' })));
     }
     static get is() { return "spw-tile-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tile/spw-tile-title/spw-tile-title.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-tile/spw-tile-title/spw-tile-title.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileTitle {
     render() {
-        return (h("h3", { key: '245d80100890b0433c53af153cf93d22a54373d3', class: "spw-tile-title" }, h("slot", { key: 'd385eb3b785c89ba208d0cdac84062379087c941' })));
+        return (h("h3", { key: 'ae2f43d85a1b248315b0866d301c30bfb3e3adc2', class: "spw-tile-title" }, h("slot", { key: '97d54e933b52987434a5bc3c5efd535cfcbefc86' })));
     }
     static get is() { return "spw-tile-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tile/spw-tile.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }
@@ -414,9 +415,6 @@ template {
   height: 100%;
   z-index: 2;
 }
-.spw-tile--big:hover:before, .spw-tile--light:hover:before {
-  opacity: 0.3;
-}
 .spw-tile__overlay, .spw-tile__image {
   position: absolute;
   width: 100%;
@@ -426,55 +424,68 @@ template {
 }
 .spw-tile__overlay {
   z-index: 2;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 65%, rgba(0, 0, 0, 0.75) 100%);
+  height: calc(100% + 48px);
+  bottom: 0;
+  top: auto;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--shades-alpha-dark-alpha-dark-alpha-900, rgba(0, 0, 0, 0.87)) 100%);
 }
 .spw-tile__image {
   z-index: 1;
   object-fit: cover;
 }
 .spw-tile__button {
-  background: white;
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  background: transparent;
   width: 48px;
   height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--spw-ds-primary);
+  color: white;
   border-radius: 50%;
   transition: all 0.2s ease-in;
-  border: 2px solid transparent;
+  border: 3px solid white;
   font-size: 20px;
   margin-top: 12px;
+  z-index: 2;
 }
 .spw-tile:hover .spw-tile__button {
-  border-color: white;
-  color: white;
-  background: transparent;
+  background: rgba(0, 0, 0, 0.5);
 }
 
-.spw-tile--icon .spw-tile__content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0 12px;
-  text-align: center;
-}
-.spw-tile--icon .spw-tile__content ::slotted(spw-icon) {
-  font-size: 32px;
-  color: var(--spw-ds-primary);
-}
 .spw-tile--light .spw-tile__content, .spw-tile--big .spw-tile__content {
   position: absolute;
   z-index: 3;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0;
   padding: 24px;
   bottom: 0;
   left: 0;
   width: 100%;
 }
+.spw-tile--big.spw-tile--hoverable .spw-tile__content {
+  padding-right: 84px;
+}
 .spw-tile--light .spw-tile__content {
   text-align: center;
   padding-bottom: 24px;
+}
+.spw-tile__content-inner {
+  position: relative;
+  z-index: 3;
+  flex: 1;
+}
+.spw-tile--icon .spw-tile__content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 12px;
+  text-align: center;
+}
+.spw-tile--icon .spw-tile__content-inner ::slotted(spw-icon) {
+  font-size: 32px;
+  color: var(--spw-ds-primary);
 }

package/dist/collection/components/spw-tile/spw-tile.js

@@ -9,23 +9,24 @@ export class SpwTile {
         this.target = '_self';
         /** Texte alternatif de l'image de fond */
         this.imageAlt = '';
-        /** Opacité de l'overlay (valeur entre 0 et 100) */
-        this.overlayOpacity = 100;
+        /** Masque la spw-tile-description et la révèle au hover (uniquement pour la variante light et big - masquée en mobile) */
+        this.revealDescription = true;
     }
-    componentWillLoad() {
+    componentDidLoad() {
         this.applyVariantToChildren();
     }
     slotChanged() {
         this.applyVariantToChildren();
     }
     applyVariantToChildren() {
-        requestAnimationFrame(() => {
-            const variantClass = `--${this.variant}`;
-            const titleElement = this.el.querySelector('spw-tile-title');
-            const descriptionElement = this.el.querySelector('spw-tile-description');
-            titleElement && titleElement.classList.add(variantClass);
-            descriptionElement && descriptionElement.classList.add(variantClass);
-        });
+        const variantClass = `--${this.variant}`;
+        const titleElement = this.el.querySelector('spw-tile-title');
+        const descriptionElement = this.el.querySelector('spw-tile-description');
+        titleElement && titleElement.classList.add(variantClass);
+        if (descriptionElement) {
+            descriptionElement.classList.add(variantClass);
+            descriptionElement.classList.toggle('--reveal-on-hover', this.revealDescription && (this.variant === 'light' || this.variant === 'big'));
+        }
     }
     get elementClass() {
         return {
@@ -33,6 +34,7 @@ export class SpwTile {
             'spw-tile--hoverable': !!this.href,
             [`spw-tile--${this.variant}`]: true,
             [`spw-tile--height-${this.height}`]: true,
+            'spw-tile--reveal-description': this.revealDescription && (this.variant === 'light' || this.variant === 'big'),
         };
     }
     onMouseEnter() {
@@ -46,6 +48,10 @@ export class SpwTile {
         if (titleElement && this.href) {
             titleElement.classList.toggle('--hovered', isHovered);
         }
+        const descriptionElement = this.el.querySelector('spw-tile-description');
+        if (descriptionElement && this.revealDescription && (this.variant === 'light' || this.variant === 'big')) {
+            descriptionElement.classList.toggle('--revealed', isHovered);
+        }
     }
     render() {
         const { href, target } = this;
@@ -56,7 +62,7 @@ export class SpwTile {
                 href,
                 target,
             };
-        return (h(Host, { key: 'fa47fef247987640be07df7c31cc29f3772afee9' }, h(TagType, Object.assign({ key: '7b619663eb8d1ef1febd6c66990d67ef3e569fa4' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '9ca35da95f0fa9222f57df9f371bf7a19faa32f4' }, h("div", { key: 'c598653142955125f59429c991c8d3838195658f', class: "spw-tile__overlay", style: { opacity: `${this.overlayOpacity / 100}` } }), h("img", { key: 'ab5b217a8cbb8b195bc214c3954ea7c05e5dfd60', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: '8eeb201966abc3cdfea0fc854274d0400b67fb21', class: "spw-tile__content" }, h("slot", { key: '8e0df9911b73e0585c72f79d433befe1758bc220' }), this.href && this.variant === 'big' && (h("span", { key: 'f9060c92ec64062db0d7966ef870a59ef1f7af17', class: "spw-tile__button" }, h("spw-icon", { key: '18a109f44d32e7f5529b07eecee2514a7cb47238', icon: "fa-chevron-right" })))))));
+        return (h(Host, { key: 'cf901f3325453adb4fe130b1d0d3bc9dfa78a323' }, h(TagType, Object.assign({ key: 'f37a6ad65125bb464e3a366760c1bd7850fa3023' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '3bbb2140643181cf6d98ae87583572994b38463b' }, h("img", { key: '8fd96171e647c8ec905955755175d135406f0b50', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: '4749a5833581683cb77c175cbec538293b789dd7', class: "spw-tile__content" }, (this.variant === 'big' || this.variant === 'light') && h("div", { key: 'c84b7a75688366c2e61e9aeb67194c64bd447705', class: "spw-tile__overlay" }), h("div", { key: '445985aa0760b2fbc60081c788005b0abfe9bf23', class: "spw-tile__content-inner" }, h("slot", { key: '3f5241b7be0673970e1a044d23817141a6091c73' })), this.href && this.variant === 'big' && (h("span", { key: '3f0a6cd4f1bdea9bbec8708ac86f5d4e895eac59', class: "spw-tile__button" }, h("spw-icon", { key: '1555a4b7c7087b1a177a07d265facfb9fcf37f6d', icon: "fa-chevron-right" })))))));
     }
     static get is() { return "spw-tile"; }
     static get encapsulation() { return "shadow"; }
@@ -190,25 +196,25 @@ export class SpwTile {
                 "attribute": "image-alt",
                 "defaultValue": "''"
             },
-            "overlayOpacity": {
-                "type": "number",
+            "revealDescription": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Opacit\u00E9 de l'overlay (valeur entre 0 et 100)"
+                    "text": "Masque la spw-tile-description et la r\u00E9v\u00E8le au hover (uniquement pour la variante light et big - masqu\u00E9e en mobile)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "overlay-opacity",
-                "defaultValue": "100"
+                "attribute": "reveal-description",
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/spw-timeline/spw-timeline-item/spw-timeline-item.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-timeline/spw-timeline-item/spw-timeline-item.js

@@ -55,10 +55,10 @@ export class SpwTimelineItem {
     }
     render() {
         const showConnector = this.isLast === 'false';
-        return (h(Host, { key: 'd744ee44c63cbf4762b311507e235a8dbeef90d0' }, h("div", { key: 'd4eae8545ccd1b715b2e1e8367f3a1bdcb819b8c', class: this.elementClass }, h("div", { key: 'c9fed1c40f5e2d8920e0d4c6411ababc4ece3852', class: "spw-timeline-item__step" }, h("div", { key: 'c31675a02e74b8493fbe5de3996e5184de532d1e', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: '1f05dc46cbd6794bc5ec2baf1a2383d6c55e7469', class: "spw-timeline-item__connector" })), h("div", { key: 'b86d31729e7126280e3322e377eb8dfe8c74ce3a', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: 'f9c6da897da3a13b6bd3d865f926e05d49f86893', class: "spw-timeline-item__description-wrapper" }, h("div", { key: 'f40db75d422ba75c6da30356105f0be0f89e1f54', ref: el => (this.descriptionRef = el), class: {
+        return (h(Host, { key: 'bed06990940bf27088d30acf046c7898b36d1867' }, h("div", { key: 'e0097fb58a7e949b624a3f849772c77452ff23e9', class: this.elementClass }, h("div", { key: '650e758e17174fe9616e65f9988cd5da2b57a403', class: "spw-timeline-item__step" }, h("div", { key: '531e0380dbabbee8106a08c12e68e7404860316b', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: '51ecd63ea9e2dc2240c8a5a42a2cf0d53b1d5f1f', class: "spw-timeline-item__connector" })), h("div", { key: '7f3da2d7a0ee388eddcfefc8c1b57079c7968097', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: 'a608d47b21e8e07f1ae10c63424c534dafc50a91', class: "spw-timeline-item__description-wrapper" }, h("div", { key: 'fdec9cbc5f723358d6244ae351e886e7a173371e', ref: el => (this.descriptionRef = el), class: {
                 'spw-timeline-item__description': true,
                 'spw-timeline-item__description--collapsed': !this.isDescriptionExpanded,
-            } }, this.description))), h("slot", { key: 'd1007cbc51a16f43c75453401c458d7ca29edf9a' })))));
+            } }, this.description))), h("slot", { key: '0f999df3ae5f72eb9aa2e2933bb8f5a897983d62' })))));
     }
     static get is() { return "spw-timeline-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-timeline/spw-timeline.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-timeline/spw-timeline.js

@@ -53,11 +53,11 @@ export class SpwTimeline {
         return this.visibleItems > 0 && items.length > this.visibleItems;
     }
     render() {
-        return (h(Host, { key: '2d3acd5c2ce9a7ba2f5e4bbb7f39b3618e2ea952' }, h("div", { key: 'b90b81419f1fd359989b811f9cb481a1d822c0b2', class: this.elementClass }, h("slot", { key: '0cd871d23e36f5ec6a58d77063161d89055c5b05' })), this.shouldShowToggleButton() && (h("div", { key: 'c9a09e893ed531a16c0c4885f0f4f2aa8b4a5150', class: {
+        return (h(Host, { key: '08d6864952bf7068e596612c23421b87529200d9' }, h("div", { key: 'dd3817680c66f28595763d2c94d5a2a158add4ec', class: this.elementClass }, h("slot", { key: '9c6a2f60d3f0fcc647834282104d6a2550af8747' })), this.shouldShowToggleButton() && (h("div", { key: '0c23627843714ef572654c783894452cd2977493', class: {
                 'spw-timeline__toggle': true,
                 'spw-timeline__toggle--more': !this.showAll,
                 'spw-timeline__toggle--less': this.showAll,
-            } }, h("span", { key: '05d884a77b08032f47aa32d184f0b1f5a9ee4164', class: "spw-timeline__toggle-btn", onClick: this.handleToggle }, this.showAll ? this.showLessText : this.showMoreText)))));
+            } }, h("span", { key: '4ce46d6480e6e8d51d201147a452d5ef1642e905', class: "spw-timeline__toggle-btn", onClick: this.handleToggle }, this.showAll ? this.showLessText : this.showMoreText)))));
     }
     static get is() { return "spw-timeline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-toast/spw-toast-controller/spw-toast-controller.css

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -339,7 +340,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -354,7 +355,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-toast/spw-toast.css

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -339,7 +340,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -354,7 +355,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-toc/spw-toc-container/spw-toc-container.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }