src/app/pages/MediaArticlePage/__snapshots__/index.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MediaArticlePage should render a news article correctly 1`] = `
.emotion-0 {
background-color: #F6F6F6;
}
.emotion-1 {
max-width: 63rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
@media (min-width: 63rem) {
.emotion-1 {
padding: 0 1rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;
}
}
.emotion-2 {
grid-column: 1/span 12;
padding-bottom: 2rem;
}
@media (min-width: 63rem) {
.emotion-2 {
grid-column: 1/span 8;
}
}
.emotion-3 {
padding-bottom: 1.5rem;
}
.emotion-4 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-5 {
padding-top: 1.5rem;
}
.emotion-6 {
position: relative;
width: 100%;
margin: 0 0 1.5rem 0;
aspect-ratio: 16/9;
}
.emotion-7 {
position: relative;
cursor: pointer;
height: 100%;
}
.no-js .emotion-7 {
cursor: default;
}
.emotion-7:hover .focusIndicatorRemove,
.emotion-7:focus .focusIndicatorRemove {
background-color: #B80000;
}
.emotion-8 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
width: 100%;
height: 100%;
position: absolute;
border: 0.0625rem solid transparent;
color: #FFFFFF;
z-index: 1;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-8 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
.no-js .emotion-8 {
background-color: rgba(34, 34, 34, 0.75);
}
@media screen and (forced-colors: active) {
.no-js .emotion-8 {
background-color: transparent;
}
}
.no-js .emotion-8 .guidance-message {
display: none;
}
.emotion-9 {
display: block;
font-weight: normal;
padding: 0.5rem;
border-bottom: 0.0625rem solid transparent;
position: absolute;
bottom: 0;
}
@media screen and (forced-colors: active) {
.emotion-9 {
background-color: window;
}
}
@media (min-width: 25rem) {
.emotion-9 {
padding: 1rem;
}
}
.emotion-9 strong {
font-weight: normal;
}
.emotion-10 {
font-size: 0.75rem;
line-height: 1rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
background-color: #222222;
border: none;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 5rem;
width: 5rem;
padding: 0;
-webkit-transition: background-color 300ms;
transition: background-color 300ms;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-10 {
font-size: 0.75rem;
line-height: 1rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 0.75rem;
line-height: 1rem;
}
}
.emotion-10:hover,
.emotion-10:focus {
background-color: #B80000;
-webkit-transition: background-color 300ms;
transition: background-color 300ms;
}
.no-js .emotion-10 {
display: none;
}
.emotion-10:focus-visible::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-shadow: 0 0 0 0.1875rem #FFFFFF inset;
border: 0.1875rem solid #000000;
}
.emotion-12 {
margin-top: 0.5rem;
}
.emotion-12>svg {
color: #FFFFFF;
fill: currentColor;
height: 1.5rem;
width: 1.5rem;
}
.emotion-13 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}
.emotion-15 {
display: block;
margin-top: 0.5rem;
}
.emotion-16 {
position: relative;
height: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
background-color: #F2F2F2;
}
@media (min-width: 25rem) {
.emotion-16 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-16 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-17 {
width: 100%;
object-fit: cover;
height: 100%;
}
.emotion-18 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
color: #545658;
margin-top: 0.5rem;
margin-inline: 0.5rem 0;
padding-inline: 0.5rem;
width: calc(100% - 0.5rem);
border-inline-start: 0.0625rem solid #6E6E73;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-18 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-18 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-18 {
width: calc(100% - 1rem);
margin-inline: 1rem 0;
padding-inline: 0.5rem 1rem;
}
}
@media (min-width: 63rem) {
.emotion-18 {
width: 100%;
margin: 0.5rem 0 0;
padding-inline: 0.5rem 0;
}
}
.emotion-18>span>p {
padding-bottom: 1.5rem;
margin: 0;
}
.emotion-18>span>p:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-20 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-20 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-20 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-20 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-20 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-20 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-20 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-20 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-20 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-20 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-20 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-20 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-20 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-23 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-23 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-23 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-23 {
padding: 2.5rem 0;
}
}
@media (max-width: 62.9375rem) {
.emotion-23 {
padding: 0.5rem 0 2rem;
}
}
@media (min-width: 63rem) {
.emotion-23 {
padding: 1rem 0 2.5rem;
}
}
@media (max-width: 14.9375rem) {
.emotion-25 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-25 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-25 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-25 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-25 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-25 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-25 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-25 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-25 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-25 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-25 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-25 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-25 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-27 {
font-size: 0.875rem;
line-height: 1.125rem;
color: #545658;
display: block;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
padding-bottom: 0.25rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-27 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-27 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
.emotion-27:last-child {
padding-bottom: 1rem;
}
.emotion-31 {
font-size: 1.25rem;
line-height: 1.5rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
color: #141414;
margin: 0;
padding: 1.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-31 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-31 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-31 {
padding-top: 2rem;
}
}
.emotion-35 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
padding-bottom: 1.5rem;
margin: 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-35 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-35 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 63rem) {
.emotion-35 {
padding-right: 2.5rem;
}
}
.emotion-37 {
margin: 0;
padding-bottom: 1.5rem;
width: 100%;
}
.emotion-38 {
position: relative;
height: 0;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
background-color: #F2F2F2;
}
@media (min-width: 25rem) {
.emotion-38 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-38 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-39 {
width: 100%;
object-fit: cover;
height: auto;
}
.emotion-40 {
color: #141414;
font-size: 0.75rem;
line-height: 1rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
background-color: rgba(34, 34, 34, 0.75);
text-transform: uppercase;
color: #FFFFFF;
padding: 0.25rem 0.5rem;
position: absolute;
bottom: 0;
inset-inline-start: 0;
margin: 0;
font-family: ReithSans,Helvetica,Arial,sans-serif;
overflow: hidden;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-40 {
font-size: 0.75rem;
line-height: 1rem;
}
}
@media (min-width: 37.5rem) {
.emotion-40 {
font-size: 0.75rem;
line-height: 1rem;
}
}
.emotion-40 span {
font-size: 0.75rem;
}
<div>
<div
class="emotion-0"
>
<noscript />
<div>
chartbeat
</div>
<div
class="emotion-1"
>
<div
class="emotion-2"
>
<main
class="emotion-3"
role="main"
>
<h1
class="emotion-4"
id="content"
tabindex="-1"
>
WS Media (1) -Media above title
</h1>
<div
class="emotion-5"
>
<figure
class="emotion-6"
data-e2e="media-loader__container"
>
<div
class="emotion-7"
data-e2e="media-loader__placeholder"
>
<div
class="emotion-8"
data-e2e="media-player__guidance"
>
<noscript
class="emotion-9"
/>
</div>
<button
class="focusIndicatorRemove emotion-10"
type="button"
>
<span
class="emotion-4"
>
Play video, "BBC launch trailer for We Know Our Place women's sport campaign", Duration 0,54
</span>
<div
aria-hidden="true"
class="emotion-12"
>
<svg
aria-hidden="true"
class="emotion-13 emotion-14"
focusable="false"
height="12"
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="M.5.6h12v12H.5z"
/>
<path
d="M2.144.96v11.28l8.712-5.64z"
fill="currentColor"
/>
</g>
</svg>
</div>
<time
aria-hidden="true"
class="emotion-15"
datetime="PT54S"
>
00:54
</time>
</button>
<div
class="emotion-16"
style="padding-bottom: 0px; overflow: hidden;"
>
<img
alt=""
class="emotion-17"
src="https://ichef.test.bbci.co.uk/images/ic/512xn/p01thw3g.jpg.webp"
srcset="https://ichef.test.bbci.co.uk/images/ic/240xn/p01thw3g.jpg.webp 240w, https://ichef.test.bbci.co.uk/images/ic/320xn/p01thw3g.jpg.webp 320w, https://ichef.test.bbci.co.uk/images/ic/480xn/p01thw3g.jpg.webp 480w, https://ichef.test.bbci.co.uk/images/ic/624xn/p01thw3g.jpg.webp 624w, https://ichef.test.bbci.co.uk/images/ic/800xn/p01thw3g.jpg.webp 800w"
/>
</div>
</div>
<figcaption
class="emotion-18"
dir="ltr"
>
<span
role="text"
>
<span
class="emotion-4"
>
Video caption,
</span>
<span
data-testid="caption-paragraph"
>
BBC launch trailer for We Know Our Place women's sport campaign"
</span>
</span>
</figcaption>
</figure>
</div>
<div
class="emotion-20 emotion-21"
dir="ltr"
>
<strong
class="emotion-22 emotion-23 emotion-24"
>
WS Media (1) -Media above title
</strong>
</div>
<div
class="emotion-25 emotion-21"
dir="ltr"
>
<time
class="emotion-27 emotion-28"
datetime="2023-01-17"
>
17 January 2023
</time>
</div>
<div
class="emotion-25 emotion-21"
dir="ltr"
>
<h2
class="emotion-31 emotion-32"
id="Headline"
tabindex="-1"
>
Headline
</h2>
</div>
<div
class="emotion-25 emotion-21"
dir="ltr"
>
<p
class="emotion-35 emotion-36"
dir="ltr"
>
Page Text
</p>
</div>
<figure
class="emotion-37"
>
<div
class="emotion-38"
style="padding-bottom: 56.29%;"
>
<img
alt="..."
class="emotion-39"
height="461"
loading="lazy"
sizes="(min-width: 1008px) 760px, 100vw"
src="https://ichef.test.bbci.co.uk/ace/ws/640/cpsprodpb/1328/live/28cc1e70-2012-11ee-bb42-b9839596b375.jpg.webp"
srcset="https://ichef.test.bbci.co.uk/ace/ws/240/cpsprodpb/1328/live/28cc1e70-2012-11ee-bb42-b9839596b375.jpg.webp 240w, https://ichef.test.bbci.co.uk/ace/ws/320/cpsprodpb/1328/live/28cc1e70-2012-11ee-bb42-b9839596b375.jpg.webp 320w, https://ichef.test.bbci.co.uk/ace/ws/480/cpsprodpb/1328/live/28cc1e70-2012-11ee-bb42-b9839596b375.jpg.webp 480w, https://ichef.test.bbci.co.uk/ace/ws/624/cpsprodpb/1328/live/28cc1e70-2012-11ee-bb42-b9839596b375.jpg.webp 624w, https://ichef.test.bbci.co.uk/ace/ws/800/cpsprodpb/1328/live/28cc1e70-2012-11ee-bb42-b9839596b375.jpg.webp 800w"
width="819"
/>
<p
class="emotion-40"
role="text"
>
<span
class="emotion-4"
>
Image source,
</span>
Getty Images
</p>
</div>
</figure>
</main>
</div>
</div>
</div>
</div>
`;