Mwpw-135989 - Special Offers Merch Card styling fixes (#1241)

* full-width css

* height alingment

* full-width text alignment centered

* use of var for container width

* revert to 1200px for full width

libs/blocks/merch-card/merch-card.css

@@ -55,8 +55,16 @@
 }
 
 .merch-card div[class$="-title"] {
+  width: 100%;
   font-size: var(--type-heading-xs-lh);
   font-weight: var(--type-heading-all-weight);
+  align-self: flex-start;
+  max-height: max-content;
+  flex: none;
+}
+
+.merch-card .consonant-SpecialOffers-title h4 {
+  text-transform: uppercase;
 }
 
 .merch-card .consonant-PlansCard-title h2 {
@@ -103,6 +111,16 @@
   border-radius: 16px;
 }
 
+.merch-card.special-offers.full-width {
+  min-width: 100%;
+  max-width: 100%;
+  width: 1200px;
+}
+
+.merch-card.special-offers.center {
+  text-align: center;
+}
+
 .merch-card div[class$="-inner"] {
   display: flex;
   flex-direction: column;
@@ -124,9 +142,12 @@
 }
 
 .merch-card div[class$="-description"] {
+  width: 100%;
   font-size: var(--type-heading-xs-size);
   line-height: 1.5;
   margin-top: 0;
+  align-self: flex-start;
+  flex-grow: 1;
 }
 
 .merch-card .consonant-SegmentBlade-description span.placeholder-resolved,
@@ -169,11 +190,13 @@
   text-align: center;
   padding: 8px 11px;
   border-radius: 5px 0 0 5px;
+  text-transform: uppercase;
 }
 
 .merch-card .consonant-SpecialOffers-inner,
 .merch-card .consonant-PlansCard-inner {
   justify-content: center;
+  height: 100%;
 }
 
 .merch-card.special-offers .consonant-SpecialOffers-description p,
@@ -271,6 +294,8 @@
   padding-top: 0;
   justify-content: center;
   box-sizing: border-box;
+  align-self: flex-end;
+  width: 100%;
 }
 
 .merch-card .consonant-CardFooter .standard-wrapper {