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

package/dist/collection/components/spw-card/spw-card-subtags/spw-card-subtags.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-card/spw-card-subtags/spw-card-subtags.js

@@ -26,7 +26,7 @@ export class SpwCardSubtags {
         };
     }
     render() {
-        return (h(Host, { key: '932526d39865c60a98dc2c5b3a725d08116a8435' }, h("div", { key: '5127d371be9c14528be9afa1badbd1278b1ae40c', class: this.elementClass }, h("slot", { key: '06cb3b41922d0f2a4bcc1dee186a01b515581144' }))));
+        return (h(Host, { key: 'bcb358ab0f2730b7bf2ceaf5d03e6cdc50f80874' }, h("div", { key: '2ba43b42a850f29d5dd77ee1555d2917fef3e2c1', class: this.elementClass }, h("slot", { key: '227e22c519166ba20930f2a0651fe02bb3445886' }))));
     }
     static get is() { return "spw-card-subtags"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-card/spw-card-title/spw-card-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);
   }
@@ -362,6 +363,54 @@ template {
 .spw-card-title {
   line-height: 1.3;
   font-weight: 700;
+}
+.spw-card-title--has-clamp {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}
+.spw-card-title--clamp-1 {
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+}
+.spw-card-title--clamp-2 {
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+.spw-card-title--clamp-3 {
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+}
+.spw-card-title--clamp-4 {
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+}
+.spw-card-title--clamp-5 {
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+}
+.spw-card-title--clamp-6 {
+  -webkit-line-clamp: 6;
+  line-clamp: 6;
+}
+.spw-card-title--clamp-7 {
+  -webkit-line-clamp: 7;
+  line-clamp: 7;
+}
+.spw-card-title--clamp-8 {
+  -webkit-line-clamp: 8;
+  line-clamp: 8;
+}
+.spw-card-title--clamp-9 {
+  -webkit-line-clamp: 9;
+  line-clamp: 9;
+}
+.spw-card-title--clamp-10 {
+  -webkit-line-clamp: 10;
+  line-clamp: 10;
+}
+.spw-card-title {
   font-size: 20px;
   transition: all 0.3s ease;
   color: var(--spw-color-themes-grey-grey-900);

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

@@ -3,9 +3,19 @@ export class SpwCardTitle {
     constructor() {
         /** Code hexadécimal de la bordure sous le titre (à appliquer sur spw-card-title si la variante de la carte est "people") */
         this.borderColor = '';
+        /** Permet de limiter ou pas le nombre de lignes affichées */
+        this.lineClamp = 'none';
+    }
+    get elementClass() {
+        const hasLineClamp = this.lineClamp !== 'none';
+        return {
+            'spw-card-title': true,
+            'spw-card-title--has-clamp': hasLineClamp,
+            [`spw-card-title--clamp-${this.lineClamp}`]: hasLineClamp,
+        };
     }
     render() {
-        return (h(Host, { key: '334d6835dd28e414809f7de8b2f6ad82708d88e6', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: 'ff00413ca35178fc4cbf60a605fe350e1239e7b7', class: "spw-card-title" }, h("span", { key: '629c669018ecb697c63c9d938b46010c8706b6ba', class: "spw-card-title__text" }, h("slot", { key: 'dac76a2afd228e94dd389122d060304f165743ed' })))));
+        return (h(Host, { key: 'b02f7913e237b6988b6b88c00929a0623d16c607', style: { '--spw-card-title-border-color': this.borderColor } }, h("h3", { key: 'ec1060047ff1cd2883f1e475791f63fc381fe017', class: this.elementClass }, h("span", { key: '87465ba67f5dbea02e7c2545acb3eb6bdc2616b5', class: "spw-card-title__text" }, h("slot", { key: '442e0b3f178f4ba1195eafc3bd24d6f0af3c9553' })))));
     }
     static get is() { return "spw-card-title"; }
     static get encapsulation() { return "shadow"; }
@@ -40,6 +50,26 @@ export class SpwCardTitle {
                 "reflect": false,
                 "attribute": "border-color",
                 "defaultValue": "''"
+            },
+            "lineClamp": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | 'none'",
+                    "resolved": "\"none\" | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet de limiter ou pas le nombre de lignes affich\u00E9es"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "line-clamp",
+                "defaultValue": "'none'"
             }
         };
     }

package/dist/collection/components/spw-card/spw-card.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);
   }
@@ -398,25 +399,51 @@ template {
   cursor: pointer;
   position: absolute;
   top: 50%;
-  left: 0;
-  transform: translate(-50%, -50%);
+  left: 25px;
+  transform: translate(0, -50%);
   flex-direction: column;
   line-height: 1.1;
-  width: 80px;
-  height: 80px;
+  width: 50px;
   text-align: center;
-  color: white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--spw-ds-primary);
-  border-radius: 50%;
-  font-size: 18px;
   text-decoration: none;
-  z-index: 2;
+  z-index: 6;
+}
+.spw-card__dates--single {
+  top: auto;
+  transform: none;
+  bottom: 24px;
+}
+.spw-card--no-image.spw-card--event .spw-card__dates {
+  left: 15px;
 }
-.spw-card__date-item span:first-of-type {
+.spw-card__date-item {
+  text-align: center;
+  margin: 4px 0;
+}
+.spw-card__date-label {
+  display: block;
+  font-size: 12px;
+  color: var(--spw-color-themes-grey-grey-600);
+  margin-bottom: 4px;
+}
+.spw-card__date-day {
+  font-size: 18px;
   font-weight: bold;
+  display: block;
+  color: var(--spw-color-themes-grey-grey-900);
+}
+.spw-card__date-month {
+  font-size: 12px;
+  display: block;
+  color: var(--spw-color-themes-grey-grey-900);
+}
+.spw-card__date-content {
+  padding: 8px 12px;
+  background: white;
+  border-radius: 6px;
 }
 
 .spw-card__link {
@@ -429,6 +456,9 @@ template {
 .spw-card--no-image .spw-card__link {
   padding-top: 15px;
 }
+.spw-card--no-image.spw-card--event .spw-card__link {
+  padding-top: 0;
+}
 .spw-card__link:focus-visible {
   outline: 3px solid white;
   outline-offset: -1px;
@@ -442,6 +472,13 @@ template {
   min-height: 240px;
 }
 
+.spw-card--has-2-dates .spw-card__link {
+  min-height: 180px;
+}
+
+.spw-card--event {
+  position: relative;
+}
 .spw-card--event .spw-card__link {
   display: flex;
 }
@@ -457,12 +494,6 @@ template {
   gap: 16px;
 }
 
-.spw-card--event {
-  position: relative;
-  width: calc(100% - 40px);
-  left: 40px;
-}
-
 .spw-card--rounded-picture {
   box-shadow: none;
   background: transparent;

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

@@ -9,6 +9,12 @@ export class SpwCard {
         this.elementType = 'a';
         /** Attribut target, s'applique uniquement si href est rempli */
         this.target = '_self';
+        /** Tableau des abréviations de mois (index 0 = janvier). Par défaut en français. */
+        this.monthLabels = ['jan', 'fév', 'mar', 'avr', 'mai', 'jun', 'jul', 'aoû', 'sep', 'oct', 'nov', 'déc'];
+        /** Préfixe affiché avant dateStart quand les deux dates sont présentes */
+        this.fromLabel = 'du';
+        /** Préfixe affiché avant dateEnd quand les deux dates sont présentes */
+        this.toLabel = 'au';
         /** Si vrai, les cartes ont la même hauteur */
         this.fullHeight = false;
         /** Si désactivée, la carte n'est pas utilisable */
@@ -68,10 +74,13 @@ export class SpwCard {
         });
     }
     formatDate(date) {
+        var _a;
         if (!date)
             return [];
-        const parts = date.split('/');
-        return parts.flatMap((part, index) => (index < parts.length - 1 ? [h("span", null, part), h("span", null, "/")] : [h("span", null, part)]));
+        const [day, month] = date.split('/');
+        const monthIndex = parseInt(month, 10) - 1;
+        const monthLabel = (_a = this.monthLabels[monthIndex]) !== null && _a !== void 0 ? _a : month;
+        return [h("span", { class: "spw-card__date-day" }, day), h("span", { class: "spw-card__date-month" }, monthLabel)];
     }
     applyVariantToChildren() {
         requestAnimationFrame(() => {
@@ -104,6 +113,7 @@ export class SpwCard {
             'spw-card--hoverable': !!this.href,
             'spw-card--no-image': !this.hasImage,
             [`spw-card--${this.variant}`]: true,
+            'spw-card--has-2-dates': this.variant === 'event' && !!(this.dateStart && this.dateEnd),
         };
     }
     render() {
@@ -120,7 +130,7 @@ export class SpwCard {
             'aria-label': this === null || this === void 0 ? void 0 : this.accAriaLabel,
             'aria-disabled': this.disabled ? 'true' : null,
         };
-        return (h(Host, { key: '1ba4f06ba66af1625688a01d08c34fab95499577', class: { '--is-full-height': this.fullHeight } }, h("article", { key: '135ae12d051e9ebc078029c99ac52ea49bf540db', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: '99c5e749128c5293c44ddeb4c85bf143dbe3c6b1' }, attrs, { class: "spw-card__dates" }), dateStart && h("div", { key: 'fcf0661e3aae2de10ad7b845da453553662b3154', class: "spw-card__date-item" }, this.formatDate(dateStart)), dateEnd && h("div", { key: '11cc7956f31154ac081e6e819294fcfe6aafff5d', class: "spw-card__date-item" }, this.formatDate(dateEnd)))), h(TagType, Object.assign({ key: 'bc3380c036847c8ac197e731f05f0333a2734634' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: 'c4c0f79011ee0ca8a893a080c177f17c51526768' })))));
+        return (h(Host, { key: 'f95a6ae6c3605ceedbd161b4d7fd6ccb32b5c9a5', class: { '--is-full-height': this.fullHeight } }, h("article", { key: 'c0f5558843980898fc024c6a58ad4c5fc0874dae', class: this.elementClass }, variant === 'event' && (h(TagType, Object.assign({ key: 'b6f5ff06ba07a44d192ccc1280f4b1ec91aec7ae' }, attrs, { class: { 'spw-card__dates': true, 'spw-card__dates--range': !!(dateStart && dateEnd), 'spw-card__dates--single': !!(dateStart && !dateEnd) } }), dateStart && (h("div", { key: '38739600168e556e1825a952d59d6b56dddfbd38', class: "spw-card__date-item" }, h("div", { key: 'e2d976245e9149f19289ed6760f9616d252bc0df', class: "spw-card__date-content" }, dateEnd && h("span", { key: 'cad7e3030d55c6784fbf8482b26d02c1090a2494', class: "spw-card__date-label" }, this.fromLabel), this.formatDate(dateStart)))), dateEnd && (h("div", { key: '5cd8ac811280cf3eb15a088f4d50d1c39d07b065', class: "spw-card__date-item" }, h("div", { key: 'd650d7ab355881400f9f3e2b2ab1e80dc5cd8e19', class: "spw-card__date-content" }, h("span", { key: 'b8c923502709ed1b6be4f548076128e8559d6c34', class: "spw-card__date-label" }, this.toLabel), this.formatDate(dateEnd)))))), h(TagType, Object.assign({ key: '38734f2432f59b83af58ad7b7600e529fe8263b0' }, attrs, ariaAttributes, { class: "spw-card__link" }), h("slot", { key: '70cc28a5bf5206cc6a9c17297dd2dcaca895d8b0' })))));
     }
     static get is() { return "spw-card"; }
     static get encapsulation() { return "shadow"; }
@@ -246,7 +256,7 @@ export class SpwCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "D\u00E9finir une date de d\u00E9but si la carte est un \u00E9v\u00E8nement"
+                    "text": "D\u00E9finir une date de d\u00E9but si la carte est un \u00E9v\u00E8nement (format : jour/mois, ex. 08/04)"
                 },
                 "getter": false,
                 "setter": false,
@@ -265,13 +275,71 @@ export class SpwCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "D\u00E9finir une date de fin si la carte est un \u00E9v\u00E8nement"
+                    "text": "D\u00E9finir une date de fin si la carte est un \u00E9v\u00E8nement (format : jour/mois, ex. 08/04)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "date-end"
             },
+            "monthLabels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tableau des abr\u00E9viations de mois (index 0 = janvier). Par d\u00E9faut en fran\u00E7ais."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['jan', 'f\u00E9v', 'mar', 'avr', 'mai', 'jun', 'jul', 'ao\u00FB', 'sep', 'oct', 'nov', 'd\u00E9c']"
+            },
+            "fromLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pr\u00E9fixe affich\u00E9 avant dateStart quand les deux dates sont pr\u00E9sentes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "from-label",
+                "defaultValue": "'du'"
+            },
+            "toLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pr\u00E9fixe affich\u00E9 avant dateEnd quand les deux dates sont pr\u00E9sentes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "to-label",
+                "defaultValue": "'au'"
+            },
             "fullHeight": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/spw-checkbox/spw-checkbox.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-checkbox/spw-checkbox.js

@@ -75,7 +75,7 @@ export class SpwCheckbox {
     render() {
         const slot = this.el.innerHTML;
         const hasSlot = Boolean(slot);
-        return (h("div", { key: 'c38a01b2898e391335b55297929b50109d892434', class: "spw-checkbox" }, h("input", { key: '2e696c49a36c92eed15f06e64b4a52722fab8062', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: 'aaa5422e96bd40d32972996be19f389cdb276e70', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: 'baa3fbdb4b6a17b91dba5c6077bd50a1f8207b61' }))), h("div", { key: '36a552efdb1a0afe004d8e518978175cfb788ccb', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: '95cdfbb6513f76bb570e3707cf34cb8ccf8e1107', icon: this.icon }))));
+        return (h("div", { key: '18ccf771e46503992b59da08f9bdf64096d3fc9a', class: "spw-checkbox" }, h("input", { key: 'ec4e470b407134abc5d71e54afa72275ea11999b', type: "checkbox", ref: el => (this.inputElement = el), checked: this.internalChecked, onChange: this.handleCheckbox.bind(this), name: this.name, disabled: this.disabled, style: { display: 'none' } }), hasSlot && (h("label", { key: '841289771f521f5a501b689b45af02753bfafbed', htmlFor: this.name, class: `spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`, onClick: e => this.handleCheckbox(e) }, h("slot", { key: 'a74b6cf82bfc54abf2bf5ebb81f9e2874cc74833' }))), h("div", { key: '4958afb920af7171e324b1bf3c7a2fb25ec11c04', tabindex: this.disabled ? -1 : 0, onClick: e => this.handleCheckbox(e), onKeyDown: this.handleKeydown.bind(this), role: "checkbox", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.name || 'Label', class: this.elementClass }, this.internalChecked && h("spw-icon", { key: '3600734ca78300af19c0ee9eaf20ae6aead1aad8', icon: this.icon }))));
     }
     static get is() { return "spw-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-cookies/spw-cookies.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-custom-select/spw-custom-select.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);
   }