From 1a746e011729946abfe526639628994b144b64a6 Mon Sep 17 00:00:00 2001 From: Axel Cureno Basurto Date: Thu, 20 Jun 2024 10:33:39 -0700 Subject: [PATCH] MWPW-135160: merch-card (plans, key-apps) Adds ability to display inline mnemonic list block inside merch card. This PR handles changes for the super-wide plans card. Resolves: MWPW-135160 Test URLs: Before: https://main--milo--axelcureno.hlx.page/drafts/axel/mwpw-135160?martech=off After: https://mwpw-135160--milo--axelcureno.hlx.page/drafts/axel/mwpw-135160?martech=off --- web-components/src/global.css.js | 1 + web-components/src/merch-card.css.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/web-components/src/global.css.js b/web-components/src/global.css.js index 89290c89..7592f2ca 100644 --- a/web-components/src/global.css.js +++ b/web-components/src/global.css.js @@ -25,6 +25,7 @@ styles.innerHTML = ` /* responsive width */ --consonant-merch-card-mobile-width: 300px; + --consonant-merch-card-tablet-wide-width: 700px; /* spacing */ --consonant-merch-spacing-xxxs: 4px; diff --git a/web-components/src/merch-card.css.js b/web-components/src/merch-card.css.js index a6433fc7..50baf225 100644 --- a/web-components/src/merch-card.css.js +++ b/web-components/src/merch-card.css.js @@ -382,8 +382,10 @@ export const sizeStyles = () => { @media screen and ${unsafeCSS(TABLET_UP)} { :host([size='wide']), :host([size='super-wide']) { - grid-column: span 2; + grid-column: span 3; width: 100%; + max-width: var(--consonant-merch-card-tablet-wide-width); + margin: 0 auto; } }