diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx
index 5732cd9d0d5..7eec08f4af7 100644
--- a/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx
+++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/index.tsx
@@ -95,12 +95,7 @@ const Header = ({
           )}
         </div>
         {mediaCollections && (
-          <div
-            css={[
-              styles.LiveMediaBaseStyling,
-              isMediaOpen && styles.liveMediaOpen,
-            ]}
-          >
+          <div css={[styles.liveMedia, isMediaOpen && styles.liveMediaOpen]}>
             <LiveHeaderMedia
               mediaCollection={mediaCollections}
               clickCallback={watchVideoClickHandler}
diff --git a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx
index 62ec1641d60..526300cd7e8 100644
--- a/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx
+++ b/ws-nextjs-app/pages/[service]/live/[id]/Header/styles.tsx
@@ -48,7 +48,7 @@ export default {
         width: '100%',
       },
     }),
-  LiveMediaBaseStyling: ({ mq, spacings }: Theme) =>
+  liveMedia: ({ mq, spacings }: Theme) =>
     css({
       padding: `0rem ${spacings.FULL}rem ${spacings.DOUBLE}rem`,
       [mq.GROUP_2_MIN_WIDTH]: {
diff --git a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
index 2a1d91d41bb..3d5020bd544 100644
--- a/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
+++ b/ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 }
 
-.emotion-4 {
+.emotion-5 {
   position: relative;
   padding: 1rem 0.5rem;
   max-width: 80rem;
@@ -51,19 +51,19 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding: 1rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-4 {
+  .emotion-5 {
     padding-top: 1.5rem;
     padding-bottom: 2rem;
   }
 }
 
-.emotion-5 {
+.emotion-6 {
   color: #141414;
   font-size: 1.25rem;
   line-height: 1.5rem;
@@ -74,37 +74,37 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-5 {
+  .emotion-6 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-5 {
+  .emotion-6 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
-.emotion-5:focus {
+.emotion-6:focus {
   outline: none;
 }
 
-.emotion-6 {
+.emotion-7 {
   display: block;
   color: #FEFEFE;
   margin-top: 1rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-6 {
+  .emotion-7 {
     margin-top: 0.5rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-6 {
+  .emotion-7 {
     width: calc(100% / 3 * 2);
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
@@ -115,7 +115,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 80rem) {
-  .emotion-6 {
+  .emotion-7 {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
@@ -124,7 +124,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 }
 
-.emotion-7 {
+.emotion-8 {
   color: #141414;
   font-size: 0.9375rem;
   line-height: 1.25rem;
@@ -137,20 +137,20 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-7 {
+  .emotion-8 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-7 {
+  .emotion-8 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
-.emotion-8 {
+.emotion-9 {
   max-width: 80rem;
   margin: 0 auto;
   display: grid;
@@ -159,13 +159,13 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-8 {
+  .emotion-9 {
     padding: 1rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-8 {
+  .emotion-9 {
     -webkit-padding-start: 1rem;
     padding-inline-start: 1rem;
     -webkit-padding-end: 1rem;
@@ -177,23 +177,23 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 }
 
-.emotion-9 {
+.emotion-10 {
   grid-column: 1/13;
 }
 
 @media (min-width: 63rem) {
-  .emotion-9 {
+  .emotion-10 {
     grid-column: 1/5;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-9 {
+  .emotion-10 {
     grid-column: 1/4;
   }
 }
 
-.emotion-10 {
+.emotion-11 {
   color: #141414;
   font-size: 1.25rem;
   line-height: 1.5rem;
@@ -205,40 +205,40 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-10 {
+  .emotion-11 {
     padding-top: 0;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-10 {
+  .emotion-11 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 
   @media (min-width: 20rem) and (max-width: 37.4375rem) {
-    .emotion-10 {
+    .emotion-11 {
       font-size: 1.25rem;
       line-height: 1.5rem;
     }
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-10 {
+    .emotion-11 {
       font-size: 1.5rem;
       line-height: 1.75rem;
     }
@@ -246,12 +246,12 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 63rem) {
-  .emotion-10 {
+  .emotion-11 {
     padding-top: 1rem;
   }
 }
 
-.emotion-11 {
+.emotion-12 {
   color: #141414;
   background-color: #F6F6F6;
   border: solid 0.1875rem transparent;
@@ -259,37 +259,37 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 25rem) {
-  .emotion-11 {
+  .emotion-12 {
     padding: 1rem 0 1rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-11 {
+  .emotion-12 {
     padding: 1rem 1rem 1rem;
   }
 }
 
-.emotion-11 li {
+.emotion-12 li {
   -webkit-padding-start: 0.1875rem;
   padding-inline-start: 0.1875rem;
 }
 
-.emotion-11 li:last-child {
+.emotion-12 li:last-child {
   margin-bottom: 0;
 }
 
-.emotion-11 ul {
+.emotion-12 ul {
   -webkit-padding-start: 1rem;
   padding-inline-start: 1rem;
   margin-bottom: 0;
 }
 
-.emotion-11 p {
+.emotion-12 p {
   padding-bottom: 0;
 }
 
-.emotion-11 a {
+.emotion-12 a {
   color: #141414;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
   font-style: normal;
@@ -297,63 +297,63 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   border-bottom: 0.0625rem solid #141414;
 }
 
-.emotion-11 a:visited {
+.emotion-12 a:visited {
   color: #545658;
 }
 
-.emotion-13 {
+.emotion-14 {
   margin-bottom: 1.5rem;
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-13 {
+  .emotion-14 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-13 {
+  .emotion-14 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-13 {
+  .emotion-14 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-13 {
+  .emotion-14 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-13 {
+  .emotion-14 {
     margin-left: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-13 {
+  .emotion-14 {
     margin-left: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-13 {
+  .emotion-14 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-13 {
+    .emotion-14 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -362,7 +362,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-13 {
+    .emotion-14 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -371,7 +371,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-13 {
+    .emotion-14 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -380,7 +380,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-13 {
+    .emotion-14 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -389,7 +389,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-13 {
+    .emotion-14 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -397,7 +397,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 80rem) {
-    .emotion-13 {
+    .emotion-14 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -405,7 +405,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 }
 
-.emotion-15 {
+.emotion-16 {
   margin-top: 0;
   list-style-type: none;
   font-size: 0.9375rem;
@@ -416,25 +416,25 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-15 {
+  .emotion-16 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-15 {
+  .emotion-16 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
-.emotion-15>li {
+.emotion-16>li {
   position: relative;
   color: inherit;
 }
 
-.emotion-15>li::before {
+.emotion-16>li::before {
   top: 0.5rem;
   content: "";
   position: absolute;
@@ -442,51 +442,51 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   inset-inline-start: -1rem;
 }
 
-.emotion-15>li::before {
+.emotion-16>li::before {
   border: 0.1875rem solid #141414;
   background-color: #141414;
   border-radius: 0;
 }
 
-.emotion-16 {
+.emotion-17 {
   margin-bottom: 1rem;
 }
 
-.emotion-19 {
+.emotion-20 {
   color: #222222;
   border-bottom: 1px solid #B80000;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-19:visited {
+.emotion-20:visited {
   color: #6E6E73;
   border-bottom: 1px solid #6E6E73;
 }
 
-.emotion-19:focus,
-.emotion-19:hover {
+.emotion-20:focus,
+.emotion-20:hover {
   border-bottom: 2px solid #B80000;
   color: #B80000;
 }
 
-.emotion-21 {
+.emotion-22 {
   grid-column: 1/13;
 }
 
 @media (min-width: 63rem) {
-  .emotion-21 {
+  .emotion-22 {
     grid-column: 5/13;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-21 {
+  .emotion-22 {
     grid-column: 4/10;
   }
 }
 
-.emotion-22 {
+.emotion-23 {
   color: #141414;
   font-size: 1.25rem;
   line-height: 1.5rem;
@@ -498,35 +498,35 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-22 {
+  .emotion-23 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-22 {
+  .emotion-23 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-22 {
+  .emotion-23 {
     font-size: 1.125rem;
     line-height: 1.375rem;
     padding-top: 1.5rem;
   }
 
   @media (min-width: 20rem) and (max-width: 37.4375rem) {
-    .emotion-22 {
+    .emotion-23 {
       font-size: 1.25rem;
       line-height: 1.5rem;
     }
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-22 {
+    .emotion-23 {
       font-size: 1.5rem;
       line-height: 1.75rem;
     }
@@ -534,12 +534,12 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 63rem) {
-  .emotion-22 {
+  .emotion-23 {
     padding-top: 1rem;
   }
 }
 
-.emotion-23 {
+.emotion-24 {
   color: #141414;
   font-size: 0.9375rem;
   line-height: 1.25rem;
@@ -551,59 +551,59 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-23 {
+  .emotion-24 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-23 {
+  .emotion-24 {
     padding-bottom: 1.5rem;
   }
 }
 
-.emotion-24 {
+.emotion-25 {
   margin-block: 0;
   padding-inline: 0;
 }
 
-.emotion-25 {
+.emotion-26 {
   list-style-type: none;
 }
 
-.emotion-26 {
+.emotion-27 {
   background-color: #F6F6F6;
   margin: 0 0 1rem;
 }
 
 @media (min-width: 25rem) {
-  .emotion-26 {
+  .emotion-27 {
     margin: 0 0 1.5rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-26 {
+  .emotion-27 {
     margin: 0 0 1rem;
   }
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-26 {
+  .emotion-27 {
     border: solid 0.1875rem transparent;
     border-top: solid 0.0625rem transparent;
   }
 }
 
-.emotion-27 {
+.emotion-28 {
   color: #141414;
   font-size: 1.125rem;
   line-height: 1.375rem;
@@ -614,26 +614,26 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-27 {
+  .emotion-28 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-27 {
+  .emotion-28 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width: 15rem) {
-  .emotion-27 {
+  .emotion-28 {
     line-height: 0;
   }
 }
 
-.emotion-28 {
+.emotion-29 {
   border-top: solid 0.125rem #B80000;
   display: inline-block;
   width: 100%;
@@ -641,12 +641,12 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-28 {
+  .emotion-29 {
     border-bottom: solid 0.1875rem transparent;
   }
 }
 
-.emotion-29 {
+.emotion-30 {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: #545658;
@@ -666,34 +666,34 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-29 {
+  .emotion-30 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-29 {
+  .emotion-30 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-29 {
+  .emotion-30 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-29 {
+  .emotion-30 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
-.emotion-31 {
+.emotion-32 {
   color: #141414;
   font-size: 0.875rem;
   line-height: 1.125rem;
@@ -707,20 +707,20 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-31 {
+  .emotion-32 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-31 {
+  .emotion-32 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
-.emotion-32 {
+.emotion-33 {
   -webkit-clip-path: inset(100%);
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
@@ -731,7 +731,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   margin: 0;
 }
 
-.emotion-33 {
+.emotion-34 {
   color: #141414;
   font-size: 1.125rem;
   line-height: 1.375rem;
@@ -746,84 +746,84 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-33 {
+  .emotion-34 {
     font-size: 1.125rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-33 {
+  .emotion-34 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
-.emotion-34 {
+.emotion-35 {
   padding: 1rem 0.5rem 0.5rem;
 }
 
 @media (min-width: 25rem) {
-  .emotion-34 {
+  .emotion-35 {
     padding: 1rem 0 0.5rem 0;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-34 {
+  .emotion-35 {
     padding: 1rem 1rem 0.5rem;
   }
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-35 {
+  .emotion-36 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-35 {
+  .emotion-36 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-35 {
+  .emotion-36 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-35 {
+  .emotion-36 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-35 {
+  .emotion-36 {
     margin-left: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-35 {
+  .emotion-36 {
     margin-left: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-35 {
+  .emotion-36 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-35 {
+    .emotion-36 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -832,7 +832,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-35 {
+    .emotion-36 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -841,7 +841,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-35 {
+    .emotion-36 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -850,7 +850,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-35 {
+    .emotion-36 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -859,7 +859,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-35 {
+    .emotion-36 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -867,7 +867,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 80rem) {
-    .emotion-35 {
+    .emotion-36 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -875,7 +875,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 }
 
-.emotion-37 {
+.emotion-38 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -890,58 +890,58 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-37 {
+  .emotion-38 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-37 {
+  .emotion-38 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 63rem) {
-  .emotion-37 {
+  .emotion-38 {
     padding-right: 2.5rem;
   }
 }
 
-.emotion-37 ul {
+.emotion-38 ul {
   padding-bottom: 1rem;
   -webkit-padding-start: 1.5rem;
   padding-inline-start: 1.5rem;
 }
 
 @media (min-width: 63rem) {
-  .emotion-37 ul {
+  .emotion-38 ul {
     padding-bottom: 0;
   }
 }
 
-.emotion-37 li {
+.emotion-38 li {
   margin-bottom: 0.5rem;
 }
 
-.emotion-37 li:last-child {
+.emotion-38 li:last-child {
   margin-bottom: 0;
 }
 
-.emotion-42 {
+.emotion-43 {
   border-top: solid 0.125rem #B80000;
   display: inline-block;
   width: 100%;
 }
 
 @media screen and (forced-colors: active) {
-  .emotion-42 {
+  .emotion-43 {
     border-bottom: solid 0.1875rem transparent;
   }
 }
 
-.emotion-59 {
+.emotion-60 {
   color: #141414;
   font-size: 0.875rem;
   line-height: 1.125rem;
@@ -956,41 +956,41 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-59 {
+  .emotion-60 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-59 {
+  .emotion-60 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-59 {
+  .emotion-60 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 
   @media (min-width: 20rem) and (max-width: 37.4375rem) {
-    .emotion-59 {
+    .emotion-60 {
       font-size: 0.9375rem;
       line-height: 1.125rem;
     }
   }
 
   @media (min-width: 37.5rem) {
-    .emotion-59 {
+    .emotion-60 {
       font-size: 0.875rem;
       line-height: 1.125rem;
     }
   }
 }
 
-.emotion-65 {
+.emotion-66 {
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
   font-weight: 400;
   font-style: italic;
@@ -998,7 +998,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   font-weight: inherit;
 }
 
-.emotion-68 {
+.emotion-69 {
   margin-bottom: 1.5rem;
   color: #000000;
   margin: 0;
@@ -1006,54 +1006,54 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (max-width: 14.9375rem) {
-  .emotion-68 {
+  .emotion-69 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 15rem) and (max-width: 24.9375rem) {
-  .emotion-68 {
+  .emotion-69 {
     padding: 0 0.5rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 25rem) and (max-width: 37.4375rem) {
-  .emotion-68 {
+  .emotion-69 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-  .emotion-68 {
+  .emotion-69 {
     padding: 0 1rem;
     margin-left: 0%;
   }
 }
 
 @media (min-width: 63rem) and (max-width: 79.9375rem) {
-  .emotion-68 {
+  .emotion-69 {
     margin-left: 20%;
   }
 }
 
 @media (min-width: 80rem) {
-  .emotion-68 {
+  .emotion-69 {
     margin-left: 40%;
   }
 }
 
 @supports (display: grid) {
-  .emotion-68 {
+  .emotion-69 {
     display: block;
     width: initial;
     margin: 0;
   }
 
   @media (max-width: 14.9375rem) {
-    .emotion-68 {
+    .emotion-69 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1062,7 +1062,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 15rem) and (max-width: 24.9375rem) {
-    .emotion-68 {
+    .emotion-69 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 0.5rem;
@@ -1071,7 +1071,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 25rem) and (max-width: 37.4375rem) {
-    .emotion-68 {
+    .emotion-69 {
       grid-template-columns: repeat(6, 1fr);
       grid-column-end: span 6;
       padding: 0 1rem;
@@ -1080,7 +1080,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
-    .emotion-68 {
+    .emotion-69 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       padding: 0 1rem;
@@ -1089,7 +1089,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 63rem) and (max-width: 79.9375rem) {
-    .emotion-68 {
+    .emotion-69 {
       grid-template-columns: repeat(5, 1fr);
       grid-column-end: span 5;
       grid-column-start: 2;
@@ -1097,7 +1097,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 
   @media (min-width: 80rem) {
-    .emotion-68 {
+    .emotion-69 {
       grid-template-columns: repeat(10, 1fr);
       grid-column-end: span 10;
       grid-column-start: 5;
@@ -1105,27 +1105,27 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   }
 }
 
-.emotion-68 ul {
+.emotion-69 ul {
   padding-bottom: 1rem;
   -webkit-padding-start: 1.5rem;
   padding-inline-start: 1.5rem;
 }
 
 @media (min-width: 63rem) {
-  .emotion-68 ul {
+  .emotion-69 ul {
     padding-bottom: 0;
   }
 }
 
-.emotion-68 li {
+.emotion-69 li {
   margin-bottom: 0.5rem;
 }
 
-.emotion-68 li:last-child {
+.emotion-69 li:last-child {
   margin-bottom: 0;
 }
 
-.emotion-70 {
+.emotion-71 {
   margin-top: 0;
   list-style-type: none;
   font-size: 0.9375rem;
@@ -1136,25 +1136,25 @@ exports[`Live Page creates snapshot of the live page 1`] = `
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-70 {
+  .emotion-71 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-70 {
+  .emotion-71 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
-.emotion-70>li {
+.emotion-71>li {
   position: relative;
   color: inherit;
 }
 
-.emotion-70>li::before {
+.emotion-71>li::before {
   top: 0.5rem;
   content: "";
   position: absolute;
@@ -1162,7 +1162,7 @@ exports[`Live Page creates snapshot of the live page 1`] = `
   inset-inline-start: -1rem;
 }
 
-.emotion-70>li::before {
+.emotion-71>li::before {
   border: 0.1875rem solid #3F3F42;
   background-color: #3F3F42;
   border-radius: 50%;
@@ -1186,20 +1186,23 @@ exports[`Live Page creates snapshot of the live page 1`] = `
       >
         <div
           class="emotion-4"
+        />
+        <div
+          class="emotion-5"
         >
           <h1
-            class="emotion-5"
+            class="emotion-6"
             id="content"
             tabindex="-1"
           >
             <span
-              class="emotion-6"
+              class="emotion-7"
             >
               Israeli tanks shell Jabalia camp as heavy fighting continues in north Gaza
             </span>
           </h1>
           <p
-            class="emotion-7"
+            class="emotion-8"
           >
             The refugee camp has been hit by hundreds of shells, where Hamas says 100,000 people are still sheltering
           </p>
@@ -1207,10 +1210,10 @@ exports[`Live Page creates snapshot of the live page 1`] = `
       </div>
     </div>
     <div
-      class="emotion-8"
+      class="emotion-9"
     >
       <div
-        class="emotion-9"
+        class="emotion-10"
       >
         <section
           aria-label="Summary"
@@ -1218,40 +1221,40 @@ exports[`Live Page creates snapshot of the live page 1`] = `
           role="region"
         >
           <h2
-            class="emotion-10"
+            class="emotion-11"
           >
             Summary
           </h2>
           <div
-            class="emotion-11"
+            class="emotion-12"
           >
             <div
-              class="emotion-12 emotion-13 emotion-14"
+              class="emotion-13 emotion-14 emotion-15"
               dir="ltr"
             >
               <ul
-                class="emotion-15"
+                class="emotion-16"
                 role="list"
               >
                 <li
-                  class="emotion-16"
+                  class="emotion-17"
                   role="listitem"
                 >
                   I am the summary box
                 </li>
                 <li
-                  class="emotion-16"
+                  class="emotion-17"
                   role="listitem"
                 >
                   I need to include bulletpoints
                 </li>
                 <li
-                  class="emotion-16"
+                  class="emotion-17"
                   role="listitem"
                 >
                   I want to 
                   <a
-                    class="focusIndicatorReducedWidth emotion-19 emotion-20"
+                    class="focusIndicatorReducedWidth emotion-20 emotion-21"
                     href="/pidgin"
                   >
                     link to somebody
@@ -1263,32 +1266,32 @@ exports[`Live Page creates snapshot of the live page 1`] = `
         </section>
       </div>
       <div
-        class="emotion-21"
+        class="emotion-22"
       >
         <div>
           <h2
-            class="emotion-22"
+            class="emotion-23"
           >
             Live Coverage
           </h2>
           <p
-            class="emotion-23"
+            class="emotion-24"
             data-testid="live-contributors"
           >
             Not a random dude
           </p>
           <ol
-            class="emotion-24"
+            class="emotion-25"
             role="list"
           >
             <li
-              class="emotion-25"
+              class="emotion-26"
             >
               <article
-                class="emotion-26"
+                class="emotion-27"
               >
                 <h3
-                  class="emotion-27"
+                  class="emotion-28"
                   id="asset:2aa3edd0-abe6-4cf3-a2fe-a1a5e98aa71e"
                   tabindex="-1"
                 >
@@ -1296,42 +1299,42 @@ exports[`Live Page creates snapshot of the live page 1`] = `
                     role="text"
                   >
                     <span
-                      class="emotion-28"
+                      class="emotion-29"
                     >
                       <time
-                        class="emotion-29 emotion-30"
+                        class="emotion-30 emotion-31"
                         datetime="09 May 2023"
                       >
                         9 May 2023
                       </time>
                       <span
-                        class="emotion-31"
+                        class="emotion-32"
                         data-testid="breaking-news-label"
                       >
                         Breaking
                       </span>
                       <span
-                        class="emotion-32"
+                        class="emotion-33"
                       >
                         , 
                       </span>
                     </span>
                     <span
-                      class="headingStyling emotion-33"
+                      class="headingStyling emotion-34"
                     >
                       Breaking news
                     </span>
                   </span>
                 </h3>
                 <div
-                  class="emotion-34"
+                  class="emotion-35"
                 >
                   <div
-                    class="emotion-35 emotion-14"
+                    class="emotion-36 emotion-15"
                     dir="ltr"
                   >
                     <p
-                      class="postStyles emotion-37 emotion-38"
+                      class="postStyles emotion-38 emotion-39"
                       dir="ltr"
                     >
                       Breaking news
@@ -1341,13 +1344,13 @@ exports[`Live Page creates snapshot of the live page 1`] = `
               </article>
             </li>
             <li
-              class="emotion-25"
+              class="emotion-26"
             >
               <article
-                class="emotion-26"
+                class="emotion-27"
               >
                 <h3
-                  class="emotion-27"
+                  class="emotion-28"
                   id="asset:7cfd060e-d8e0-4364-b177-31d58ae0c062"
                   tabindex="-1"
                 >
@@ -1355,31 +1358,31 @@ exports[`Live Page creates snapshot of the live page 1`] = `
                     role="text"
                   >
                     <span
-                      class="emotion-42"
+                      class="emotion-43"
                     >
                       <time
-                        class="emotion-29 emotion-30"
+                        class="emotion-30 emotion-31"
                         datetime="09 May 2023"
                       >
                         9 May 2023
                       </time>
                     </span>
                     <span
-                      class="headingStyling emotion-33"
+                      class="headingStyling emotion-34"
                     >
                       Published 6.07pm Tues 9th
                     </span>
                   </span>
                 </h3>
                 <div
-                  class="emotion-34"
+                  class="emotion-35"
                 >
                   <div
-                    class="emotion-35 emotion-14"
+                    class="emotion-36 emotion-15"
                     dir="ltr"
                   >
                     <p
-                      class="postStyles emotion-37 emotion-38"
+                      class="postStyles emotion-38 emotion-39"
                       dir="ltr"
                     >
                       Timestamp test
@@ -1389,13 +1392,13 @@ exports[`Live Page creates snapshot of the live page 1`] = `
               </article>
             </li>
             <li
-              class="emotion-25"
+              class="emotion-26"
             >
               <article
-                class="emotion-26"
+                class="emotion-27"
               >
                 <h3
-                  class="emotion-27"
+                  class="emotion-28"
                   id="asset:1009a4c7-ef57-4d77-a0f7-3ef886baee4c"
                   tabindex="-1"
                 >
@@ -1403,87 +1406,87 @@ exports[`Live Page creates snapshot of the live page 1`] = `
                     role="text"
                   >
                     <span
-                      class="emotion-42"
+                      class="emotion-43"
                     >
                       <time
-                        class="emotion-29 emotion-30"
+                        class="emotion-30 emotion-31"
                         datetime="21 March 2023"
                       >
                         21 March 2023
                       </time>
                     </span>
                     <span
-                      class="headingStyling emotion-33"
+                      class="headingStyling emotion-34"
                     >
                       Another post
                     </span>
                     <span
-                      class="emotion-32"
+                      class="emotion-33"
                     >
                       , 
                     </span>
                     <span
-                      class="headingStyling emotion-59"
+                      class="headingStyling emotion-60"
                     >
                       Another post sub headline
                     </span>
                   </span>
                 </h3>
                 <div
-                  class="emotion-34"
+                  class="emotion-35"
                 >
                   <div
-                    class="emotion-35 emotion-14"
+                    class="emotion-36 emotion-15"
                     dir="ltr"
                   >
                     <p
-                      class="postStyles emotion-37 emotion-38"
+                      class="postStyles emotion-38 emotion-39"
                       dir="ltr"
                     >
                       <b>
                         Another 
                       </b>
                       <i
-                        class="emotion-65 emotion-66"
+                        class="emotion-66 emotion-67"
                       >
                         short form text
                       </i>
                     </p>
                   </div>
                   <div
-                    class="postStyles emotion-12 emotion-68 emotion-14"
+                    class="postStyles emotion-13 emotion-69 emotion-15"
                     dir="ltr"
                   >
                     <ul
-                      class="emotion-70"
+                      class="emotion-71"
                       role="list"
                     >
                       <li
-                        class="emotion-16"
+                        class="emotion-17"
                         role="listitem"
                       >
                         <i
-                          class="emotion-65 emotion-66"
+                          class="emotion-66 emotion-67"
                         >
                           one
                         </i>
                       </li>
                       <li
-                        class="emotion-16"
+                        class="emotion-17"
                         role="listitem"
                       >
                         <i
-                          class="emotion-65 emotion-66"
+                          class="emotion-66 emotion-67"
                         >
                           two
                         </i>
                       </li>
                       <li
-                        class="emotion-16"
+                        class="emotion-17"
                         role="listitem"
                       >
                         <i
-                          class="emotion-65 emotion-66"
+                          class="emotion-66 emotion-67"
                         >
                           three
                         </i>
@@ -1491,48 +1494,48 @@ exports[`Live Page creates snapshot of the live page 1`] = `
                     </ul>
                   </div>
                   <div
-                    class="emotion-35 emotion-14"
+                    class="emotion-36 emotion-15"
                     dir="ltr"
                   >
                     <p
-                      class="postStyles emotion-37 emotion-38"
+                      class="postStyles emotion-38 emotion-39"
                       dir="ltr"
                     />
                   </div>
                   <div
-                    class="postStyles emotion-12 emotion-68 emotion-14"
+                    class="postStyles emotion-13 emotion-69 emotion-15"
                     dir="ltr"
                   >
                     <ul
-                      class="emotion-70"
+                      class="emotion-71"
                       role="list"
                     >
                       <li
-                        class="emotion-16"
+                        class="emotion-17"
                         role="listitem"
                       >
                         <i
-                          class="emotion-65 emotion-66"
+                          class="emotion-66 emotion-67"
                         >
                           Bullet 1
                         </i>
                       </li>
                       <li
-                        class="emotion-16"
+                        class="emotion-17"
                         role="listitem"
                       >
                         <i
-                          class="emotion-65 emotion-66"
+                          class="emotion-66 emotion-67"
                         >
                           Bullet 2
                         </i>
                       </li>
                       <li
-                        class="emotion-16"
+                        class="emotion-17"
                         role="listitem"
                       >
                         <i
-                          class="emotion-65 emotion-66"
+                          class="emotion-66 emotion-67"
                         >
                           Bullet 3
                         </i>
@@ -1540,25 +1543,25 @@ exports[`Live Page creates snapshot of the live page 1`] = `
                     </ul>
                   </div>
                   <div
-                    class="emotion-35 emotion-14"
+                    class="emotion-36 emotion-15"
                     dir="ltr"
                   >
                     <p
-                      class="postStyles emotion-37 emotion-38"
+                      class="postStyles emotion-38 emotion-39"
                       dir="ltr"
                     />
                   </div>
                   <div
-                    class="emotion-35 emotion-14"
+                    class="emotion-36 emotion-15"
                     dir="ltr"
                   >
                     <p
-                      class="postStyles emotion-37 emotion-38"
+                      class="postStyles emotion-38 emotion-39"
                       dir="ltr"
                     >
                       Here is a 
                       <a
-                        class="focusIndicatorReducedWidth emotion-19 emotion-20"
+                        class="focusIndicatorReducedWidth emotion-20 emotion-21"
                         href="/new/pidgin"
                       >
                         Link
@@ -1569,13 +1572,13 @@ exports[`Live Page creates snapshot of the live page 1`] = `
               </article>
             </li>
             <li
-              class="emotion-25"
+              class="emotion-26"
             >
               <article
-                class="emotion-26"
+                class="emotion-27"
               >
                 <h3
-                  class="emotion-27"
+                  class="emotion-28"
                   id="asset:5a8d509c-fb87-4763-90ed-1e63a70c30a2"
                   tabindex="-1"
                 >
@@ -1583,41 +1586,41 @@ exports[`Live Page creates snapshot of the live page 1`] = `
                     role="text"
                   >
                     <span
-                      class="emotion-42"
+                      class="emotion-43"
                     >
                       <time
-                        class="emotion-29 emotion-30"
+                        class="emotion-30 emotion-31"
                         datetime="21 March 2023"
                       >
                         21 March 2023
                       </time>
                     </span>
                     <span
-                      class="headingStyling emotion-33"
+                      class="headingStyling emotion-34"
                     >
                       Post headline
                     </span>
                     <span
-                      class="emotion-32"
+                      class="emotion-33"
                     >
                       , 
                     </span>
                     <span
-                      class="headingStyling emotion-59"
+                      class="headingStyling emotion-60"
                     >
                       Post sub headline
                     </span>
                   </span>
                 </h3>
                 <div
-                  class="emotion-34"
+                  class="emotion-35"
                 >
                   <div
-                    class="emotion-35 emotion-14"
+                    class="emotion-36 emotion-15"
                     dir="ltr"
                   >
                     <p
-                      class="postStyles emotion-37 emotion-38"
+                      class="postStyles emotion-38 emotion-39"
                       dir="ltr"
                     >
                       Some short form text