From 71c3a65ccaaba1beba34639d55185294efb7145f Mon Sep 17 00:00:00 2001
From: Michael <mlampesd@gmail.com>
Date: Thu, 13 Sep 2018 11:48:28 -0700
Subject: [PATCH] fix(ListRow) Improve centering of subtitle when list row is
 expanded; fix subtitle text overflowing onto button; fix overflow section
 columns on list catalog page; Update ListFlowOverflow spec; bottomsheet
 catalog page; sectionItemShape (#162)

---
 catalog/pages/bottom_sheet/index.js           |   6 +-
 catalog/pages/bottom_sheet/index.md           |   2 +-
 catalog/pages/list_row/index.js               |   6 +-
 catalog/pages/list_row/index.md               |  22 +-
 catalog/pages/list_row/mock.js                |  14 +-
 src/components/List/RowContent.js             |  37 +-
 .../List/__tests__/ListRowOverflow.spec.js    |   5 +-
 .../__snapshots__/Container.spec.js.snap      | 444 ++++++-------
 .../__tests__/__snapshots__/Row.spec.js.snap  | 600 +++++++-----------
 src/components/List/shape.js                  |   3 +-
 10 files changed, 485 insertions(+), 654 deletions(-)

diff --git a/catalog/pages/bottom_sheet/index.js b/catalog/pages/bottom_sheet/index.js
index 20891f005..e7c163804 100644
--- a/catalog/pages/bottom_sheet/index.js
+++ b/catalog/pages/bottom_sheet/index.js
@@ -8,6 +8,9 @@ import { sections } from "../list_row/mock";
 import ListRowOverflow from "../../../src/components/List/Overflow";
 import Section from "../../../src/components/List/Section";
 import SectionItem from "../../../src/components/List/SectionItem";
+import { constants } from "../../../src/theme";
+
+const { MAX_COLUMNS } = constants;
 
 export default {
   path: "/bottomSheet",
@@ -19,7 +22,8 @@ export default {
     SectionItem,
     sections,
     ListRowOverflow,
-    ReactCSSTransitionGroup
+    ReactCSSTransitionGroup,
+    MAX_COLUMNS
   },
   content: pageLoader(() => import("./index.md"))
 };
diff --git a/catalog/pages/bottom_sheet/index.md b/catalog/pages/bottom_sheet/index.md
index 94dcfb931..60b841596 100644
--- a/catalog/pages/bottom_sheet/index.md
+++ b/catalog/pages/bottom_sheet/index.md
@@ -15,7 +15,7 @@ responsive: true
     <BottomSheet>
      <ListRowOverflow>
       {sections.map(section =>
-        <Section title={section.title} totalSections={4} key={section.key}>
+        <Section title={section.title} noOfColumns={MAX_COLUMNS / sections.length} key={section.key}>
           {section.items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
         </Section>
diff --git a/catalog/pages/list_row/index.js b/catalog/pages/list_row/index.js
index 77cdf1988..b44e1ce24 100644
--- a/catalog/pages/list_row/index.js
+++ b/catalog/pages/list_row/index.js
@@ -8,8 +8,11 @@ import {
   SectionItem
 } from "../../../src/components/List";
 import { Button } from "../../../src/components/Button";
+import { constants } from "../../../src/theme";
 import { listItems, sections } from "./mock";
 
+const { MAX_COLUMNS } = constants;
+
 const onOverflowButtonClick = ({ scope, index }) => ({ event }) => ev => {}; // eslint-disable-line
 
 export default {
@@ -24,7 +27,8 @@ export default {
     Button,
     listItems,
     sections,
-    onOverflowButtonClick
+    onOverflowButtonClick,
+    MAX_COLUMNS
   },
   content: pageLoader(() => import("./index.md"))
 };
diff --git a/catalog/pages/list_row/index.md b/catalog/pages/list_row/index.md
index 1fe1b8920..3f9c342ef 100644
--- a/catalog/pages/list_row/index.md
+++ b/catalog/pages/list_row/index.md
@@ -26,7 +26,7 @@ rows:
 
 ### ListContainer
 
-Container Component which contians all the ListRows and is responsible for managing the expand or collapse state for the row.
+Container Component which contains all the ListRows and is responsible for managing the expand or collapse state for the row.
 
 ### Props
 
@@ -107,7 +107,7 @@ responsive: true
   <ListRow rowItem={listItems[0]} index={0} onOverflowClick={()=>{}}>
     <ListRowOverflow>
     {sections.map(section =>
-        <Section title={section.title} totalSections={4} key={section.key}>
+        <Section title={section.title} noOfColumns={MAX_COLUMNS / sections.length} key={section.key}>
           {section.items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
         </Section>
@@ -117,11 +117,11 @@ responsive: true
 
   <ListRow rowItem={listItems[1]} index={1} onOverflowClick={()=>{}}>
     <ListRowOverflow>
-      <Section title={sections[0].title} totalSections={2} key={sections[0].key}>
+      <Section title={sections[0].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[0].key}>
           {sections[0].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-       <Section title={sections[1].title} totalSections={2} key={sections[1].key}>
+       <Section title={sections[1].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[1].key}>
           {sections[1].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
@@ -131,15 +131,15 @@ responsive: true
 
   <ListRow rowItem={listItems[2]} index={2} onOverflowClick={()=>{}}>
     <ListRowOverflow>
-     <Section title={sections[0].title} totalSections={3} key={sections[0].key}>
+     <Section title={sections[0].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[0].key}>
           {sections[0].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-       <Section title={sections[1].title} totalSections={3} key={sections[1].key}>
+       <Section title={sections[1].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[1].key}>
           {sections[1].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-      <Section title={sections[2].title} totalSections={3} key={sections[2].key}>
+      <Section title={sections[2].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[2].key}>
           {sections[2].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
@@ -148,15 +148,15 @@ responsive: true
 
   <ListRow rowItem={listItems[3]} index={3} onOverflowClick={()=>{}}>
     <ListRowOverflow>
-     <Section title={sections[0].title} totalSections={3} key={sections[0].key}>
+     <Section title={sections[0].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[0].key}>
           {sections[0].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-       <Section title={sections[1].title} totalSections={3} key={sections[1].key}>
+       <Section title={sections[1].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[1].key}>
           {sections[1].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
-      <Section title={sections[2].title} totalSections={3} key={sections[2].key}>
+      <Section title={sections[2].title} noOfColumns={MAX_COLUMNS / sections.length} key={sections[2].key}>
           {sections[2].items.map(item =>
           <SectionItem item={item} key={item.title}/>)}
       </Section>
@@ -176,7 +176,7 @@ responsive: true
  <ListRow rowItem={listItems[0]} index={0} onOverflowClick={()=>{}}>
  <ListRowOverflow>
  {sections.map(section =>
-    <Section title={section.title} totalSections={4} key={section.key}>
+    <Section title={section.title} noOfColumns={MAX_COLUMNS / sections.length} key={section.key}>
       {section.items.map(item =>
       <SectionItem item={item} key={item.title}/>)}
     </Section>
diff --git a/catalog/pages/list_row/mock.js b/catalog/pages/list_row/mock.js
index 28191205d..5980d640f 100644
--- a/catalog/pages/list_row/mock.js
+++ b/catalog/pages/list_row/mock.js
@@ -34,7 +34,7 @@ export const listItems = [
   {
     rowId: "570",
     title: "Del Mar Fairgrounds",
-    subTitle: "KABOO 3-Day Pass",
+    subTitle: "KABOO 3-Day Premium Pass with Exclusive Back Stage Access",
     dateTitle: "apr 23",
     dateSubTitle: "Thu, 8:00 PM",
     buttonText: "Acheter des Billets",
@@ -70,8 +70,7 @@ export const sections = [
         title: "Parking Pass Available",
         icon: <ParkingIcon size={26} color={colors.blackPearl} />
       }
-    ],
-    totalSections: 4
+    ]
   },
 
   {
@@ -85,8 +84,7 @@ export const sections = [
         onItemClick: () => {},
         url: "/"
       }
-    ],
-    totalSections: 4
+    ]
   },
 
   {
@@ -116,8 +114,7 @@ export const sections = [
         ),
         onItemClick: () => {}
       }
-    ],
-    totalSections: 4
+    ]
   },
   {
     title: "More",
@@ -128,8 +125,7 @@ export const sections = [
         icon: <TicketIcon size={26} color={colors.blackPearl} />,
         onItemClick: () => {}
       }
-    ],
-    totalSections: 4
+    ]
   }
 ];
 
diff --git a/src/components/List/RowContent.js b/src/components/List/RowContent.js
index ec48143c6..a5e18cb9d 100644
--- a/src/components/List/RowContent.js
+++ b/src/components/List/RowContent.js
@@ -11,7 +11,7 @@ import { Row, Column } from "../Grid";
 import { PrimaryText, SecondaryText, BoldText, Link } from "../Text";
 import OverflowIcon from "../Icons/Overflow";
 import ChevronIcon from "../Icons/Chevron";
-import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
+import { mediumAndUp } from "../../theme/mediaQueries";
 import { rowDataShape } from "./shape";
 import constants from "../../theme/constants";
 
@@ -102,6 +102,7 @@ const DateWrapper = styled.div`
 const ContentColumn = styled(Column)`
   display: none;
   ${mediumAndUp`
+  position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -196,25 +197,19 @@ const MultilinePrimaryText = styled(PrimaryText)`
   /* stylelint-enable */
 
   ${mediumAndUp`
-    &.multiline-text {
+    &.subtitle--hidden {
       position: absolute;
       transition: opacity 0.1s ${constants.easing.easeInQuad};
       opacity: 0;
     }
 
-    &.multiline-text--active {
+    &.subtitle--active {
       transition: opacity 0.3s ${constants.easing.easeInOutQuad} 0.2s;
       opacity: 1;
     }
 
-    &.multiline-text__subtitle {
-      margin-left: 40px;
-    }
-  `};
-
-  ${largeAndUp`
-    &.multiline-text__subtitle {
-      margin-left: 125px;
+    &.subtitle--expanded {
+      transform: translateX(-55%);
     }
   `};
 `;
@@ -305,9 +300,7 @@ const ListRowContent = ({
 
           <ContentColumn
             key="primary"
-            medium={4.5}
-            large={4}
-            xLarge={5}
+            medium={6}
             className={classnames({
               column__content: true,
               "list-row--title": true,
@@ -317,15 +310,14 @@ const ListRowContent = ({
           >
             <MultilinePrimaryText>{title}</MultilinePrimaryText>
           </ContentColumn>
-          <ContentColumn key="secondary" medium={7.5} large={8} xLarge={7}>
+          <ContentColumn key="secondary" medium={6}>
             <MultilinePrimaryText
               key="collapsed"
               className={classnames({
-                "multiline-text": true,
-                "multiline-text__subtitle": true,
+                subtitle: true,
                 "list-row--subtitle": true,
-                "multiline-text--active": !isOpen,
-                "multiline-text--hidden": isOpen
+                "subtitle--active": !isOpen,
+                "subtitle--hidden": isOpen
               })}
             >
               {subTitle}
@@ -333,9 +325,10 @@ const ListRowContent = ({
             <MultilinePrimaryText
               key="expanded"
               className={classnames({
-                "multiline-text": true,
-                "multiline-text--active": isOpen,
-                "multiline-text--hidden": !isOpen
+                subtitle: true,
+                "subtitle--expanded": true,
+                "subtitle--active": isOpen,
+                "subtitle--hidden": !isOpen
               })}
             >
               {isOpen && onExpandShow === "title" ? title : subTitle}
diff --git a/src/components/List/__tests__/ListRowOverflow.spec.js b/src/components/List/__tests__/ListRowOverflow.spec.js
index 106c855ef..f43d8a6c8 100644
--- a/src/components/List/__tests__/ListRowOverflow.spec.js
+++ b/src/components/List/__tests__/ListRowOverflow.spec.js
@@ -5,6 +5,9 @@ import { sections } from "../../../../catalog/pages/list_row/mock";
 import ListRowOverflow from "../Overflow";
 import Section from "../Section";
 import SectionItem from "../SectionItem";
+import { constants } from "../../../theme";
+
+const { MAX_COLUMNS } = constants;
 
 describe("<ListRowOverflow />", () => {
   it("renders ListRowOverflow correctly", () => {
@@ -13,7 +16,7 @@ describe("<ListRowOverflow />", () => {
         {sections.map(section => (
           <Section
             title={section.title}
-            totalSections={4}
+            totalSections={MAX_COLUMNS / sections.length}
             key={section.id}
             id={section.id}
           >
diff --git a/src/components/List/__tests__/__snapshots__/Container.spec.js.snap b/src/components/List/__tests__/__snapshots__/Container.spec.js.snap
index b895bff9a..cc6c30183 100644
--- a/src/components/List/__tests__/__snapshots__/Container.spec.js.snap
+++ b/src/components/List/__tests__/__snapshots__/Container.spec.js.snap
@@ -59,7 +59,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -70,24 +70,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--expanded sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--expanded sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -471,7 +471,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -482,24 +482,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -883,37 +883,37 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
             <div
               class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
         </div>
@@ -1295,7 +1295,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
@@ -1306,24 +1306,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
@@ -1715,7 +1715,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
@@ -1726,24 +1726,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
@@ -2127,7 +2127,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
@@ -2138,24 +2138,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
@@ -2539,37 +2539,37 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
               <div
                 class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
             </div>
           </div>
@@ -2951,7 +2951,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
               </div>
@@ -2962,24 +2962,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Gramercy Theatre - New York, NY
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Gramercy Theatre - New York, NY
               </div>
@@ -3371,7 +3371,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -3382,24 +3382,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--expanded sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--expanded sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -3783,7 +3783,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -3794,24 +3794,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -4195,37 +4195,37 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
             <div
               class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
         </div>
@@ -4607,7 +4607,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
@@ -4618,24 +4618,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
@@ -5027,7 +5027,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
@@ -5038,24 +5038,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
@@ -5439,7 +5439,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
@@ -5450,24 +5450,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
@@ -5851,37 +5851,37 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
               <div
                 class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
             </div>
           </div>
@@ -6263,7 +6263,7 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
               </div>
@@ -6274,24 +6274,24 @@ exports[`<ListContainer /> closes the bottomSheet for the row when clicked on cr
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Gramercy Theatre - New York, NY
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Gramercy Theatre - New York, NY
               </div>
@@ -6684,7 +6684,7 @@ exports[`<ListContainer /> closes the modal when clicked on an expanded item on
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
@@ -6695,24 +6695,24 @@ exports[`<ListContainer /> closes the modal when clicked on an expanded item on
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
@@ -6934,7 +6934,7 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -6945,24 +6945,24 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -7346,7 +7346,7 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -7357,24 +7357,24 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -7758,37 +7758,37 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
             <div
               class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
         </div>
@@ -8170,7 +8170,7 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
@@ -8181,24 +8181,24 @@ exports[`<ListContainer /> collapses the listRow when clicked on collapse button
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
@@ -8589,7 +8589,7 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -8600,24 +8600,24 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--expanded sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--expanded sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -9001,7 +9001,7 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -9012,24 +9012,24 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -9413,37 +9413,37 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
             <div
               class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
         </div>
@@ -9825,7 +9825,7 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
@@ -9836,24 +9836,24 @@ exports[`<ListContainer /> expands the listRow when clicked on expand button 1`]
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
@@ -10245,7 +10245,7 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
@@ -10256,24 +10256,24 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--expanded sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--expanded sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
               <div
-                class="multiline-text multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
@@ -10657,7 +10657,7 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
@@ -10668,24 +10668,24 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 KABOO 3-Day Pass
               </div>
@@ -11069,37 +11069,37 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
               <div
                 class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Del Mar Fairgrounds
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
-                KABOO 3-Day Pass
+                KABOO 3-Day Premium Pass with Exclusive Back Stage Access
               </div>
             </div>
           </div>
@@ -11481,7 +11481,7 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
               class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
             >
               <div
-                class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
               </div>
@@ -11492,24 +11492,24 @@ exports[`<ListContainer /> opens the bottomSheet for the row when clicked on ove
               </div>
             </div>
             <div
-              class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+              class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
               </div>
             </div>
             <div
-              class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+              class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
             >
               <div
-                class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Gramercy Theatre - New York, NY
               </div>
               <div
-                class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+                class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
               >
                 Gramercy Theatre - New York, NY
               </div>
@@ -11901,7 +11901,7 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -11912,24 +11912,24 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -12030,7 +12030,7 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
@@ -12041,24 +12041,24 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               KABOO 3-Day Pass
             </div>
@@ -12159,37 +12159,37 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
             <div
               class="list-row--subtitle sc-gisBJw ilZAkz sc-kGXeez fNtIEy"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Del Mar Fairgrounds
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
-              KABOO 3-Day Pass
+              KABOO 3-Day Premium Pass with Exclusive Back Stage Access
             </div>
           </div>
         </div>
@@ -12288,7 +12288,7 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
             class="sc-hzDkRC dyaetU sc-bZQynM cRWIlh"
           >
             <div
-              class="list-row--title sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="list-row--title sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
@@ -12299,24 +12299,24 @@ exports[`<ListContainer /> renders ListContainer correctly without any expanded
             </div>
           </div>
           <div
-            class="column__content list-row--title column__content--collapsed sc-bRBYWo eIcADT sc-bZQynM iYUAkG"
+            class="column__content list-row--title column__content--collapsed sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               CEG & T Presents Amorphis/Dark Tranquillity/Moonspell/Omnium Gatherum
             </div>
           </div>
           <div
-            class="sc-bRBYWo eIcADT sc-bZQynM etuxOP"
+            class="sc-bRBYWo jKkxky sc-bZQynM cFzilm"
           >
             <div
-              class="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle list-row--subtitle subtitle--active sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
             <div
-              class="multiline-text multiline-text--hidden sc-caSCKo nQEXg sc-kgoBCf jBUxbb"
+              class="subtitle subtitle--expanded subtitle--hidden sc-caSCKo eYfvIK sc-kgoBCf jBUxbb"
             >
               Gramercy Theatre - New York, NY
             </div>
diff --git a/src/components/List/__tests__/__snapshots__/Row.spec.js.snap b/src/components/List/__tests__/__snapshots__/Row.spec.js.snap
index 3fb6fd69b..289c0b375 100644
--- a/src/components/List/__tests__/__snapshots__/Row.spec.js.snap
+++ b/src/components/List/__tests__/__snapshots__/Row.spec.js.snap
@@ -48,16 +48,6 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
   flex: 0 0 100%;
 }
 
-.c17 {
-  box-sizing: border-box;
-  padding-right: 8px;
-  padding-left: 8px;
-  max-width: 100%;
-  -webkit-flex: 0 0 100%;
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-}
-
 .c14 {
   font-size: 14px;
   color: rgba(38,38,38,1);
@@ -108,7 +98,7 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
   pointer-events: none;
 }
 
-.c21 {
+.c20 {
   height: 36px;
   width: 100%;
   min-width: 100px;
@@ -127,18 +117,18 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
   width: 35px;
 }
 
-.c21:disabled {
+.c20:disabled {
   color: rgba(255,255,255,0.5);
   background-color: transparent;
   border: 1px solid rgba(255,255,255,0.5);
   cursor: not-allowed;
 }
 
-.c21:focus {
+.c20:focus {
   outline: none;
 }
 
-.c21 > * {
+.c20 > * {
   pointer-events: none;
 }
 
@@ -197,7 +187,7 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
   display: none;
 }
 
-.c19 {
+.c18 {
   font-weight: 600;
   font-size: 14px;
   line-height: 2.43;
@@ -235,23 +225,23 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
   padding: 18px 0 18px 0;
 }
 
-.c19:focus {
+.c18:focus {
   outline: none;
   box-shadow: 0 0 5px 0 #026cdf;
 }
 
-.c19:hover {
+.c18:hover {
   background-color: #0150a7;
 }
 
-.c19:active {
+.c18:active {
   -webkit-transform: scale(0.98,0.98) translate(0,1px);
   -ms-transform: scale(0.98,0.98) translate(0,1px);
   transform: scale(0.98,0.98) translate(0,1px);
   background-color: #013670;
 }
 
-.c19:disabled {
+.c18:disabled {
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
@@ -262,12 +252,12 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
   opacity: 0.2;
 }
 
-.c22 {
+.c21 {
   max-height: 0;
   overflow: hidden;
 }
 
-.c18 {
+.c17 {
   display: none;
   padding-left: 16px;
   padding-right: 8px;
@@ -331,59 +321,30 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c16 {
-    max-width: 37.5%;
+    max-width: 50%;
     padding-right: 12px;
     padding-left: 12px;
-    -webkit-flex: 0 0 37.5%;
-    -ms-flex: 0 0 37.5%;
-    flex: 0 0 37.5%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c16 {
-    max-width: 33.33333333333333%;
-    -webkit-flex: 0 0 33.33333333333333%;
-    -ms-flex: 0 0 33.33333333333333%;
-    flex: 0 0 33.33333333333333%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1440px) {
   .c16 {
-    max-width: 41.66666666666667%;
-    -webkit-flex: 0 0 41.66666666666667%;
-    -ms-flex: 0 0 41.66666666666667%;
-    flex: 0 0 41.66666666666667%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c17 {
-    max-width: 62.5%;
-    padding-right: 12px;
-    padding-left: 12px;
-    -webkit-flex: 0 0 62.5%;
-    -ms-flex: 0 0 62.5%;
-    flex: 0 0 62.5%;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c17 {
-    max-width: 66.66666666666666%;
-    -webkit-flex: 0 0 66.66666666666666%;
-    -ms-flex: 0 0 66.66666666666666%;
-    flex: 0 0 66.66666666666666%;
-  }
-}
-
-@media screen and (min-width:1440px) {
-  .c17 {
-    max-width: 58.333333333333336%;
-    -webkit-flex: 0 0 58.333333333333336%;
-    -ms-flex: 0 0 58.333333333333336%;
-    flex: 0 0 58.333333333333336%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
@@ -449,6 +410,7 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c15 {
+    position: relative;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -483,11 +445,11 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c22 {
+  .c21 {
     border-top: 0.5px solid #E0E0E0;
   }
 
-  .c22.container__overflow--expanded {
+  .c21.container__overflow--expanded {
     background-color: rgba(255,255,255,1);
     max-height: 600px;
     -webkit-transition: max-height 0.3s cubic-bezier(0.455,0.03,0.515,0.955),opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
@@ -495,7 +457,7 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
     opacity: 1;
   }
 
-  .c22.container__overflow--collapsed {
+  .c21.container__overflow--collapsed {
     -webkit-transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
@@ -503,7 +465,7 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c18 {
+  .c17 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -520,33 +482,29 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c20 {
+  .c19 {
     display: none;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c13.multiline-text {
+  .c13.subtitle--hidden {
     position: absolute;
     -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
   }
 
-  .c13.multiline-text--active {
+  .c13.subtitle--active {
     -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     opacity: 1;
   }
 
-  .c13.multiline-text__subtitle {
-    margin-left: 40px;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c13.multiline-text__subtitle {
-    margin-left: 125px;
+  .c13.subtitle--expanded {
+    -webkit-transform: translateX(-55%);
+    -ms-transform: translateX(-55%);
+    transform: translateX(-55%);
   }
 }
 
@@ -639,26 +597,26 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
             </div>
           </div>
           <div
-            className="c15 c17"
+            className="c15 c16"
           >
             <div
-              className="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active c13 c14"
+              className="subtitle list-row--subtitle subtitle--active c13 c14"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              className="multiline-text multiline-text--hidden c13 c14"
+              className="subtitle subtitle--expanded subtitle--hidden c13 c14"
             >
               KABOO 3-Day Pass
             </div>
           </div>
         </div>
         <div
-          className="c18"
+          className="c17"
         >
           <span
             aria-label="See Tickets"
-            className="c19"
+            className="c18"
             onClick={[Function]}
             role="button"
             size="regular"
@@ -669,11 +627,11 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
         </div>
       </a>
       <div
-        className="c20"
+        className="c19"
       >
         <button
           aria-label="More Info"
-          className="button--more-info c21"
+          className="button--more-info c20"
           data-index={0}
           onClick={[Function]}
           role="button"
@@ -693,7 +651,7 @@ exports[`<ListRow /> renders List Row with colored date correctly 1`] = `
       </div>
     </div>
     <div
-      className="container__overflow container__overflow--collapsed c22 c12"
+      className="container__overflow container__overflow--collapsed c21 c12"
     />
   </div>
 </div>
@@ -747,17 +705,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   flex: 0 0 100%;
 }
 
-.c17 {
-  box-sizing: border-box;
-  padding-right: 8px;
-  padding-left: 8px;
-  max-width: 100%;
-  -webkit-flex: 0 0 100%;
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-}
-
-.c23 {
+.c22 {
   box-sizing: border-box;
   padding-right: 8px;
   padding-left: 8px;
@@ -767,7 +715,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   flex: 0 0 75%;
 }
 
-.c25 {
+.c24 {
   box-sizing: border-box;
   padding-right: 8px;
   padding-left: 8px;
@@ -793,7 +741,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   font-weight: 600;
 }
 
-.c24 {
+.c23 {
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
@@ -806,14 +754,14 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   cursor: pointer;
 }
 
-.c24:focus,
-.c24:active,
-.c24:visited,
-.c24:hover {
+.c23:focus,
+.c23:active,
+.c23:visited,
+.c23:hover {
   color: rgba(2,108,223,1);
 }
 
-.c24:hover {
+.c23:hover {
   color: #0150a7;
 }
 
@@ -851,7 +799,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   pointer-events: none;
 }
 
-.c21 {
+.c20 {
   height: 36px;
   width: 100%;
   min-width: 100px;
@@ -870,18 +818,18 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   width: 35px;
 }
 
-.c21:disabled {
+.c20:disabled {
   color: rgba(255,255,255,0.5);
   background-color: transparent;
   border: 1px solid rgba(255,255,255,0.5);
   cursor: not-allowed;
 }
 
-.c21:focus {
+.c20:focus {
   outline: none;
 }
 
-.c21 > * {
+.c20 > * {
   pointer-events: none;
 }
 
@@ -940,7 +888,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   display: none;
 }
 
-.c19 {
+.c18 {
   font-weight: 600;
   font-size: 14px;
   line-height: 2.43;
@@ -978,23 +926,23 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   padding: 18px 0 8px 0;
 }
 
-.c19:focus {
+.c18:focus {
   outline: none;
   box-shadow: 0 0 5px 0 #026cdf;
 }
 
-.c19:hover {
+.c18:hover {
   background-color: #0150a7;
 }
 
-.c19:active {
+.c18:active {
   -webkit-transform: scale(0.98,0.98) translate(0,1px);
   -ms-transform: scale(0.98,0.98) translate(0,1px);
   transform: scale(0.98,0.98) translate(0,1px);
   background-color: #013670;
 }
 
-.c19:disabled {
+.c18:disabled {
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
@@ -1005,16 +953,16 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
   opacity: 0.2;
 }
 
-.c22 {
+.c21 {
   padding-left: 8px;
 }
 
-.c26 {
+.c25 {
   max-height: 0;
   overflow: hidden;
 }
 
-.c18 {
+.c17 {
   display: none;
   padding-left: 16px;
   padding-right: 8px;
@@ -1078,64 +1026,35 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c16 {
-    max-width: 37.5%;
+    max-width: 50%;
     padding-right: 12px;
     padding-left: 12px;
-    -webkit-flex: 0 0 37.5%;
-    -ms-flex: 0 0 37.5%;
-    flex: 0 0 37.5%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c16 {
-    max-width: 33.33333333333333%;
-    -webkit-flex: 0 0 33.33333333333333%;
-    -ms-flex: 0 0 33.33333333333333%;
-    flex: 0 0 33.33333333333333%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1440px) {
   .c16 {
-    max-width: 41.66666666666667%;
-    -webkit-flex: 0 0 41.66666666666667%;
-    -ms-flex: 0 0 41.66666666666667%;
-    flex: 0 0 41.66666666666667%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c17 {
-    max-width: 62.5%;
-    padding-right: 12px;
-    padding-left: 12px;
-    -webkit-flex: 0 0 62.5%;
-    -ms-flex: 0 0 62.5%;
-    flex: 0 0 62.5%;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c17 {
-    max-width: 66.66666666666666%;
-    -webkit-flex: 0 0 66.66666666666666%;
-    -ms-flex: 0 0 66.66666666666666%;
-    flex: 0 0 66.66666666666666%;
-  }
-}
-
-@media screen and (min-width:1440px) {
-  .c17 {
-    max-width: 58.333333333333336%;
-    -webkit-flex: 0 0 58.333333333333336%;
-    -ms-flex: 0 0 58.333333333333336%;
-    flex: 0 0 58.333333333333336%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c23 {
+  .c22 {
     max-width: 83.33333333333334%;
     padding-right: 12px;
     padding-left: 12px;
@@ -1146,7 +1065,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c23 {
+  .c22 {
     max-width: 87.5%;
     -webkit-flex: 0 0 87.5%;
     -ms-flex: 0 0 87.5%;
@@ -1155,7 +1074,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:1440px) {
-  .c23 {
+  .c22 {
     max-width: 90%;
     -webkit-flex: 0 0 90%;
     -ms-flex: 0 0 90%;
@@ -1164,7 +1083,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c25 {
+  .c24 {
     max-width: 16.666666666666664%;
     padding-right: 12px;
     padding-left: 12px;
@@ -1175,7 +1094,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c25 {
+  .c24 {
     max-width: 12.5%;
     -webkit-flex: 0 0 12.5%;
     -ms-flex: 0 0 12.5%;
@@ -1184,7 +1103,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:1440px) {
-  .c25 {
+  .c24 {
     max-width: 10%;
     -webkit-flex: 0 0 10%;
     -ms-flex: 0 0 10%;
@@ -1205,13 +1124,13 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c24 {
+  .c23 {
     font-size: 14px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c24 {
+  .c23 {
     font-size: 14px;
   }
 }
@@ -1266,6 +1185,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c15 {
+    position: relative;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -1300,17 +1220,17 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c22 {
+  .c21 {
     padding-left: 12px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c26 {
+  .c25 {
     border-top: 0.5px solid #E0E0E0;
   }
 
-  .c26.container__overflow--expanded {
+  .c25.container__overflow--expanded {
     background-color: rgba(255,255,255,1);
     max-height: 600px;
     -webkit-transition: max-height 0.3s cubic-bezier(0.455,0.03,0.515,0.955),opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
@@ -1318,7 +1238,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
     opacity: 1;
   }
 
-  .c26.container__overflow--collapsed {
+  .c25.container__overflow--collapsed {
     -webkit-transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
@@ -1326,7 +1246,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c18 {
+  .c17 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -1343,33 +1263,29 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c20 {
+  .c19 {
     display: none;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c13.multiline-text {
+  .c13.subtitle--hidden {
     position: absolute;
     -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
   }
 
-  .c13.multiline-text--active {
+  .c13.subtitle--active {
     -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     opacity: 1;
   }
 
-  .c13.multiline-text__subtitle {
-    margin-left: 40px;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c13.multiline-text__subtitle {
-    margin-left: 125px;
+  .c13.subtitle--expanded {
+    -webkit-transform: translateX(-55%);
+    -ms-transform: translateX(-55%);
+    transform: translateX(-55%);
   }
 }
 
@@ -1462,26 +1378,26 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
             </div>
           </div>
           <div
-            className="c15 c17"
+            className="c15 c16"
           >
             <div
-              className="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active c13 c14"
+              className="subtitle list-row--subtitle subtitle--active c13 c14"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              className="multiline-text multiline-text--hidden c13 c14"
+              className="subtitle subtitle--expanded subtitle--hidden c13 c14"
             >
               KABOO 3-Day Pass
             </div>
           </div>
         </div>
         <div
-          className="c18"
+          className="c17"
         >
           <span
             aria-label="See Tickets"
-            className="c19"
+            className="c18"
             onClick={[Function]}
             role="button"
             size="regular"
@@ -1492,11 +1408,11 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
         </div>
       </a>
       <div
-        className="c20"
+        className="c19"
       >
         <button
           aria-label="More Info"
-          className="button--more-info c21"
+          className="button--more-info c20"
           data-index={0}
           onClick={[Function]}
           role="button"
@@ -1516,13 +1432,13 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
       </div>
     </div>
     <div
-      className="c22 c10"
+      className="c21 c10"
     >
       <div
-        className="c23"
+        className="c22"
       >
         <span
-          className="c24"
+          className="c23"
           href=""
           rel="_self"
           size={
@@ -1538,7 +1454,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
         </span>
       </div>
       <div
-        className="c25"
+        className="c24"
       >
         <div
           className="c9"
@@ -1548,7 +1464,7 @@ exports[`<ListRow /> renders List Row with link correctly 1`] = `
       </div>
     </div>
     <div
-      className="container__overflow container__overflow--collapsed c26 c12"
+      className="container__overflow container__overflow--collapsed c25 c12"
     />
   </div>
 </div>
@@ -1602,17 +1518,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   flex: 0 0 100%;
 }
 
-.c17 {
-  box-sizing: border-box;
-  padding-right: 8px;
-  padding-left: 8px;
-  max-width: 100%;
-  -webkit-flex: 0 0 100%;
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-}
-
-.c23 {
+.c22 {
   box-sizing: border-box;
   padding-right: 8px;
   padding-left: 8px;
@@ -1622,7 +1528,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   flex: 0 0 75%;
 }
 
-.c25 {
+.c24 {
   box-sizing: border-box;
   padding-right: 8px;
   padding-left: 8px;
@@ -1648,7 +1554,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   font-weight: 600;
 }
 
-.c24 {
+.c23 {
   font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
@@ -1660,14 +1566,14 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   transition: color 0.3s ease;
 }
 
-.c24:focus,
-.c24:active,
-.c24:visited,
-.c24:hover {
+.c23:focus,
+.c23:active,
+.c23:visited,
+.c23:hover {
   color: rgba(2,108,223,1);
 }
 
-.c24:hover {
+.c23:hover {
   color: #0150a7;
 }
 
@@ -1705,7 +1611,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   pointer-events: none;
 }
 
-.c21 {
+.c20 {
   height: 36px;
   width: 100%;
   min-width: 100px;
@@ -1724,18 +1630,18 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   width: 35px;
 }
 
-.c21:disabled {
+.c20:disabled {
   color: rgba(255,255,255,0.5);
   background-color: transparent;
   border: 1px solid rgba(255,255,255,0.5);
   cursor: not-allowed;
 }
 
-.c21:focus {
+.c20:focus {
   outline: none;
 }
 
-.c21 > * {
+.c20 > * {
   pointer-events: none;
 }
 
@@ -1794,7 +1700,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   display: none;
 }
 
-.c19 {
+.c18 {
   font-weight: 600;
   font-size: 14px;
   line-height: 2.43;
@@ -1832,23 +1738,23 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   padding: 18px 0 8px 0;
 }
 
-.c19:focus {
+.c18:focus {
   outline: none;
   box-shadow: 0 0 5px 0 #026cdf;
 }
 
-.c19:hover {
+.c18:hover {
   background-color: #0150a7;
 }
 
-.c19:active {
+.c18:active {
   -webkit-transform: scale(0.98,0.98) translate(0,1px);
   -ms-transform: scale(0.98,0.98) translate(0,1px);
   transform: scale(0.98,0.98) translate(0,1px);
   background-color: #013670;
 }
 
-.c19:disabled {
+.c18:disabled {
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
@@ -1859,16 +1765,16 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
   opacity: 0.2;
 }
 
-.c22 {
+.c21 {
   padding-left: 8px;
 }
 
-.c26 {
+.c25 {
   max-height: 0;
   overflow: hidden;
 }
 
-.c18 {
+.c17 {
   display: none;
   padding-left: 16px;
   padding-right: 8px;
@@ -1932,64 +1838,35 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c16 {
-    max-width: 37.5%;
+    max-width: 50%;
     padding-right: 12px;
     padding-left: 12px;
-    -webkit-flex: 0 0 37.5%;
-    -ms-flex: 0 0 37.5%;
-    flex: 0 0 37.5%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c16 {
-    max-width: 33.33333333333333%;
-    -webkit-flex: 0 0 33.33333333333333%;
-    -ms-flex: 0 0 33.33333333333333%;
-    flex: 0 0 33.33333333333333%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1440px) {
   .c16 {
-    max-width: 41.66666666666667%;
-    -webkit-flex: 0 0 41.66666666666667%;
-    -ms-flex: 0 0 41.66666666666667%;
-    flex: 0 0 41.66666666666667%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c17 {
-    max-width: 62.5%;
-    padding-right: 12px;
-    padding-left: 12px;
-    -webkit-flex: 0 0 62.5%;
-    -ms-flex: 0 0 62.5%;
-    flex: 0 0 62.5%;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c17 {
-    max-width: 66.66666666666666%;
-    -webkit-flex: 0 0 66.66666666666666%;
-    -ms-flex: 0 0 66.66666666666666%;
-    flex: 0 0 66.66666666666666%;
-  }
-}
-
-@media screen and (min-width:1440px) {
-  .c17 {
-    max-width: 58.333333333333336%;
-    -webkit-flex: 0 0 58.333333333333336%;
-    -ms-flex: 0 0 58.333333333333336%;
-    flex: 0 0 58.333333333333336%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c23 {
+  .c22 {
     max-width: 83.33333333333334%;
     padding-right: 12px;
     padding-left: 12px;
@@ -2000,7 +1877,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c23 {
+  .c22 {
     max-width: 87.5%;
     -webkit-flex: 0 0 87.5%;
     -ms-flex: 0 0 87.5%;
@@ -2009,7 +1886,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:1440px) {
-  .c23 {
+  .c22 {
     max-width: 90%;
     -webkit-flex: 0 0 90%;
     -ms-flex: 0 0 90%;
@@ -2018,7 +1895,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c25 {
+  .c24 {
     max-width: 16.666666666666664%;
     padding-right: 12px;
     padding-left: 12px;
@@ -2029,7 +1906,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c25 {
+  .c24 {
     max-width: 12.5%;
     -webkit-flex: 0 0 12.5%;
     -ms-flex: 0 0 12.5%;
@@ -2038,7 +1915,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:1440px) {
-  .c25 {
+  .c24 {
     max-width: 10%;
     -webkit-flex: 0 0 10%;
     -ms-flex: 0 0 10%;
@@ -2059,13 +1936,13 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c24 {
+  .c23 {
     font-size: 14px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c24 {
+  .c23 {
     font-size: 14px;
   }
 }
@@ -2120,6 +1997,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c15 {
+    position: relative;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -2154,17 +2032,17 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c22 {
+  .c21 {
     padding-left: 12px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c26 {
+  .c25 {
     border-top: 0.5px solid #E0E0E0;
   }
 
-  .c26.container__overflow--expanded {
+  .c25.container__overflow--expanded {
     background-color: rgba(255,255,255,1);
     max-height: 600px;
     -webkit-transition: max-height 0.3s cubic-bezier(0.455,0.03,0.515,0.955),opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
@@ -2172,7 +2050,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
     opacity: 1;
   }
 
-  .c26.container__overflow--collapsed {
+  .c25.container__overflow--collapsed {
     -webkit-transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
@@ -2180,7 +2058,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c18 {
+  .c17 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -2197,33 +2075,29 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c20 {
+  .c19 {
     display: none;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c13.multiline-text {
+  .c13.subtitle--hidden {
     position: absolute;
     -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
   }
 
-  .c13.multiline-text--active {
+  .c13.subtitle--active {
     -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     opacity: 1;
   }
 
-  .c13.multiline-text__subtitle {
-    margin-left: 40px;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c13.multiline-text__subtitle {
-    margin-left: 125px;
+  .c13.subtitle--expanded {
+    -webkit-transform: translateX(-55%);
+    -ms-transform: translateX(-55%);
+    transform: translateX(-55%);
   }
 }
 
@@ -2316,26 +2190,26 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
             </div>
           </div>
           <div
-            className="c15 c17"
+            className="c15 c16"
           >
             <div
-              className="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active c13 c14"
+              className="subtitle list-row--subtitle subtitle--active c13 c14"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              className="multiline-text multiline-text--hidden c13 c14"
+              className="subtitle subtitle--expanded subtitle--hidden c13 c14"
             >
               KABOO 3-Day Pass
             </div>
           </div>
         </div>
         <div
-          className="c18"
+          className="c17"
         >
           <span
             aria-label="See Tickets"
-            className="c19"
+            className="c18"
             onClick={[Function]}
             role="button"
             size="regular"
@@ -2346,11 +2220,11 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
         </div>
       </a>
       <div
-        className="c20"
+        className="c19"
       >
         <button
           aria-label="More Info"
-          className="button--more-info c21"
+          className="button--more-info c20"
           data-index={0}
           onClick={[Function]}
           role="button"
@@ -2370,13 +2244,13 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
       </div>
     </div>
     <div
-      className="c22 c10"
+      className="c21 c10"
     >
       <div
-        className="c23"
+        className="c22"
       >
         <a
-          className="c24"
+          className="c23"
           href="/"
           rel="_self"
           size={
@@ -2392,7 +2266,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
         </a>
       </div>
       <div
-        className="c25"
+        className="c24"
       >
         <div
           className="c9"
@@ -2402,7 +2276,7 @@ exports[`<ListRow /> renders List Row with variant withLink correctly 1`] = `
       </div>
     </div>
     <div
-      className="container__overflow container__overflow--collapsed c26 c12"
+      className="container__overflow container__overflow--collapsed c25 c12"
     />
   </div>
 </div>
@@ -2456,16 +2330,6 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
   flex: 0 0 100%;
 }
 
-.c17 {
-  box-sizing: border-box;
-  padding-right: 8px;
-  padding-left: 8px;
-  max-width: 100%;
-  -webkit-flex: 0 0 100%;
-  -ms-flex: 0 0 100%;
-  flex: 0 0 100%;
-}
-
 .c14 {
   font-size: 14px;
   color: rgba(38,38,38,1);
@@ -2516,7 +2380,7 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
   pointer-events: none;
 }
 
-.c21 {
+.c20 {
   height: 36px;
   width: 100%;
   min-width: 100px;
@@ -2535,18 +2399,18 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
   width: 35px;
 }
 
-.c21:disabled {
+.c20:disabled {
   color: rgba(255,255,255,0.5);
   background-color: transparent;
   border: 1px solid rgba(255,255,255,0.5);
   cursor: not-allowed;
 }
 
-.c21:focus {
+.c20:focus {
   outline: none;
 }
 
-.c21 > * {
+.c20 > * {
   pointer-events: none;
 }
 
@@ -2605,7 +2469,7 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
   display: none;
 }
 
-.c19 {
+.c18 {
   font-weight: 600;
   font-size: 14px;
   line-height: 2.43;
@@ -2643,23 +2507,23 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
   padding: 18px 0 18px 0;
 }
 
-.c19:focus {
+.c18:focus {
   outline: none;
   box-shadow: 0 0 5px 0 #026cdf;
 }
 
-.c19:hover {
+.c18:hover {
   background-color: #0150a7;
 }
 
-.c19:active {
+.c18:active {
   -webkit-transform: scale(0.98,0.98) translate(0,1px);
   -ms-transform: scale(0.98,0.98) translate(0,1px);
   transform: scale(0.98,0.98) translate(0,1px);
   background-color: #013670;
 }
 
-.c19:disabled {
+.c18:disabled {
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
@@ -2670,12 +2534,12 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
   opacity: 0.2;
 }
 
-.c22 {
+.c21 {
   max-height: 0;
   overflow: hidden;
 }
 
-.c18 {
+.c17 {
   display: none;
   padding-left: 16px;
   padding-right: 8px;
@@ -2739,59 +2603,30 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c16 {
-    max-width: 37.5%;
+    max-width: 50%;
     padding-right: 12px;
     padding-left: 12px;
-    -webkit-flex: 0 0 37.5%;
-    -ms-flex: 0 0 37.5%;
-    flex: 0 0 37.5%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1024px) {
   .c16 {
-    max-width: 33.33333333333333%;
-    -webkit-flex: 0 0 33.33333333333333%;
-    -ms-flex: 0 0 33.33333333333333%;
-    flex: 0 0 33.33333333333333%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
 @media screen and (min-width:1440px) {
   .c16 {
-    max-width: 41.66666666666667%;
-    -webkit-flex: 0 0 41.66666666666667%;
-    -ms-flex: 0 0 41.66666666666667%;
-    flex: 0 0 41.66666666666667%;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c17 {
-    max-width: 62.5%;
-    padding-right: 12px;
-    padding-left: 12px;
-    -webkit-flex: 0 0 62.5%;
-    -ms-flex: 0 0 62.5%;
-    flex: 0 0 62.5%;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c17 {
-    max-width: 66.66666666666666%;
-    -webkit-flex: 0 0 66.66666666666666%;
-    -ms-flex: 0 0 66.66666666666666%;
-    flex: 0 0 66.66666666666666%;
-  }
-}
-
-@media screen and (min-width:1440px) {
-  .c17 {
-    max-width: 58.333333333333336%;
-    -webkit-flex: 0 0 58.333333333333336%;
-    -ms-flex: 0 0 58.333333333333336%;
-    flex: 0 0 58.333333333333336%;
+    max-width: 50%;
+    -webkit-flex: 0 0 50%;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
   }
 }
 
@@ -2857,6 +2692,7 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
 
 @media screen and (min-width:768px) {
   .c15 {
+    position: relative;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -2891,11 +2727,11 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c22 {
+  .c21 {
     border-top: 0.5px solid #E0E0E0;
   }
 
-  .c22.container__overflow--expanded {
+  .c21.container__overflow--expanded {
     background-color: rgba(255,255,255,1);
     max-height: 600px;
     -webkit-transition: max-height 0.3s cubic-bezier(0.455,0.03,0.515,0.955),opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
@@ -2903,7 +2739,7 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
     opacity: 1;
   }
 
-  .c22.container__overflow--collapsed {
+  .c21.container__overflow--collapsed {
     -webkit-transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: max-height 0.3s cubic-bezier(0.55,0.085,0.68,0.53),opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
@@ -2911,7 +2747,7 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c18 {
+  .c17 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -2928,33 +2764,29 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c20 {
+  .c19 {
     display: none;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c13.multiline-text {
+  .c13.subtitle--hidden {
     position: absolute;
     -webkit-transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     transition: opacity 0.1s cubic-bezier(0.55,0.085,0.68,0.53);
     opacity: 0;
   }
 
-  .c13.multiline-text--active {
+  .c13.subtitle--active {
     -webkit-transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     transition: opacity 0.3s cubic-bezier(0.455,0.03,0.515,0.955) 0.2s;
     opacity: 1;
   }
 
-  .c13.multiline-text__subtitle {
-    margin-left: 40px;
-  }
-}
-
-@media screen and (min-width:1024px) {
-  .c13.multiline-text__subtitle {
-    margin-left: 125px;
+  .c13.subtitle--expanded {
+    -webkit-transform: translateX(-55%);
+    -ms-transform: translateX(-55%);
+    transform: translateX(-55%);
   }
 }
 
@@ -3047,26 +2879,26 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
             </div>
           </div>
           <div
-            className="c15 c17"
+            className="c15 c16"
           >
             <div
-              className="multiline-text multiline-text__subtitle list-row--subtitle multiline-text--active c13 c14"
+              className="subtitle list-row--subtitle subtitle--active c13 c14"
             >
               KABOO 3-Day Pass
             </div>
             <div
-              className="multiline-text multiline-text--hidden c13 c14"
+              className="subtitle subtitle--expanded subtitle--hidden c13 c14"
             >
               KABOO 3-Day Pass
             </div>
           </div>
         </div>
         <div
-          className="c18"
+          className="c17"
         >
           <span
             aria-label="See Tickets"
-            className="c19"
+            className="c18"
             onClick={[Function]}
             role="button"
             size="regular"
@@ -3077,11 +2909,11 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
         </div>
       </a>
       <div
-        className="c20"
+        className="c19"
       >
         <button
           aria-label="More Info"
-          className="button--more-info c21"
+          className="button--more-info c20"
           data-index={0}
           onClick={[Function]}
           role="button"
@@ -3101,7 +2933,7 @@ exports[`<ListRow /> renders standard List Row correctly 1`] = `
       </div>
     </div>
     <div
-      className="container__overflow container__overflow--collapsed c22 c12"
+      className="container__overflow container__overflow--collapsed c21 c12"
     />
   </div>
 </div>
diff --git a/src/components/List/shape.js b/src/components/List/shape.js
index 6362404ba..a74e099cc 100644
--- a/src/components/List/shape.js
+++ b/src/components/List/shape.js
@@ -24,6 +24,5 @@ export const sectionItemShape = {
       icon: PropTypes.node.isRequired,
       onItemClick: PropTypes.func
     })
-  ).isRequired,
-  totalSections: PropTypes.number
+  ).isRequired
 };