src/app/legacy/containers/SocialEmbed/__snapshots__/index.test.jsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SocialEmbedContainer AMP should match snapshot 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
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-0 {
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-0 {
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-0 {
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-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
margin-bottom: 1.5rem;
max-width: 31.25rem;
min-height: 14rem;
}
.no-js .emotion-2 {
min-height: 0;
}
.emotion-4 {
position: relative;
}
.no-js .emotion-4 {
display: none;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
display: block;
left: 0;
line-height: 1;
padding: 0.75rem;
position: absolute;
-webkit-text-decoration: none;
text-decoration: none;
top: 0;
z-index: 10;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 0.8125rem;
}
}
.emotion-6 span {
color: #222222;
}
.emotion-6:hover span,
.emotion-6:focus span {
color: #B80000;
border-bottom: 2px solid #B80000;
}
.emotion-6:not(:focus):not(:active) {
-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-8 {
margin: 0;
background-color: 'transparent';
}
.emotion-10 {
background-color: #FFFFFF;
padding: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
border: 0.0625rem solid #8A8C8E;
}
.emotion-11 {
color: #141414;
font-size: 1.125rem;
line-height: 1.375rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-11 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-11 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
.emotion-12 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
margin: 1rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-12 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
font-size: 1rem;
line-height: 1.375rem;
}
}
.emotion-12 a {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 0.0625rem solid #141414;
}
.emotion-12 a:visited {
color: #545658;
border-bottom: 0.0625rem solid #545658;
}
.emotion-12 a:hover,
.emotion-12 a:focus {
color: #B80000;
border-bottom: 0.125rem solid #B80000;
}
.emotion-13 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
background-color: #FFFFFF;
border: 0.0625rem solid #8A8C8E;
border-radius: 0;
padding: 0.5rem;
cursor: pointer;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-13 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-13:hover,
.emotion-13:focus {
background-color: #B80000;
color: #FFFFFF;
border: 0.0625rem solid #B80000;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-13:focus-visible {
outline: 0.1875rem solid #000000;
}
.emotion-14 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
display: block;
color: #545658;
padding: 0.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-14 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-14 {
font-size: 0.8125rem;
}
}
.emotion-14>span {
-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-16 {
-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;
}
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<div
class="emotion-2 emotion-3"
data-e2e="twitter-embed-https://twitter.com/BBCNews/status/1384138850478346243?s=20"
>
<div
class="emotion-4 emotion-5"
>
<a
aria-describedby=":r8:"
class="focusIndicatorRemove emotion-6 emotion-7"
href="#end-of-twitter-content-1"
>
<span>
Skip Twitter content, 1
</span>
</a>
<div
class="emotion-8 emotion-9"
>
<div
class="emotion-10"
data-testid="consentBanner"
id="consentBanner-1384138850478346243"
>
<strong
class="emotion-11"
data-testid="banner-heading"
>
Allow Twitter content?
</strong>
<p
class="emotion-12"
data-testid="banner-body"
>
This article contains content provided by Twitter. We ask for your permission before anything is loaded, as they may be using cookies and other technologies. You may want to read Twitter
<a
aria-label="cookie policy, external"
class="focusIndicatorReducedWidth"
href="https://help.twitter.com/en/rules-and-policies/twitter-cookies"
>
cookie policy
</a>
and
<a
aria-label="privacy policy, external"
class="focusIndicatorReducedWidth"
href="https://twitter.com/en/privacy"
>
privacy policy
</a>
before accepting. To view this content choose 'accept and continue'.
</p>
<button
class="emotion-13"
data-testid="banner-button"
type="button"
>
Accept and continue
</button>
</div>
<small
class="emotion-14 emotion-15"
id=":r8:"
>
Warning: The BBC is not responsible for the content of external sites.
</small>
</div>
<p
class="emotion-16 emotion-17"
id="end-of-twitter-content-1"
tabindex="-1"
>
End of Twitter content, 1
</p>
</div>
<noscript />
</div>
</div>
`;
exports[`SocialEmbedContainer Canonical should render a Facebook Post block and unmount correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
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-0 {
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-0 {
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-0 {
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-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
margin-bottom: 1.5rem;
max-width: 31.25rem;
min-height: 14rem;
}
.no-js .emotion-2 {
min-height: 0;
}
.emotion-4 {
position: relative;
}
.no-js .emotion-4 {
display: none;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
display: block;
left: 0;
line-height: 1;
padding: 0.75rem;
position: absolute;
-webkit-text-decoration: none;
text-decoration: none;
top: 0;
z-index: 10;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 0.8125rem;
}
}
.emotion-6 span {
color: #222222;
}
.emotion-6:hover span,
.emotion-6:focus span {
color: #B80000;
border-bottom: 2px solid #B80000;
}
.emotion-6:not(:focus):not(:active) {
-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-8 {
margin: 0;
background-color: 'transparent';
}
.emotion-10 {
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-10 .fb_iframe_widget {
position: unset;
}
.emotion-10 .fb_iframe_widget>span {
position: unset;
}
.emotion-10 iframe {
background-color: white;
left: 0;
top: 0;
height: 100%!important;
width: 100%!important;
position: absolute!important;
}
.emotion-12 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
display: block;
color: #545658;
padding: 0.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-12 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
font-size: 0.8125rem;
}
}
.emotion-12>span {
-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-14 {
-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;
}
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<div
class="emotion-2 emotion-3"
data-e2e="facebook-embed-https://www.facebook.com/RickAstley/posts/545713756920775"
>
<div
class="emotion-4 emotion-5"
>
<a
aria-describedby=":r4:"
class="focusIndicatorRemove emotion-6 emotion-7"
href="#end-of-facebook-content"
>
<span>
Skip Facebook content
</span>
</a>
<div
class="emotion-8 emotion-9"
>
<div
class="emotion-10 emotion-11"
>
<div
id="fb-root"
/>
<script
async="1"
crossorigin="anonymous"
defer="1"
nonce="fPyyhrbz"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v13.0"
/>
<div
class="fb-post"
data-href="https://www.facebook.com/RickAstley/posts/545713756920775"
data-width="552"
>
<blockquote
cite="https://graph.facebook.com/100044464658204/posts/545713756920775/"
class="fb-xfbml-parse-ignore"
>
<p>
Had a fantastic time at @thescriptofficial concert in LA this week, what a gig!! Have a great US tour guys! Don’t miss...
</p>
Posted by
<a
href="https://www.facebook.com/RickAstley"
>
Rick Astley
</a>
on
<a
href="https://graph.facebook.com/100044464658204/posts/545713756920775/"
>
Friday, April 1, 2022
</a>
</blockquote>
</div>
</div>
<small
class="emotion-12 emotion-13"
id=":r4:"
>
Warning: The BBC is not responsible for the content of external sites.
</small>
</div>
<p
class="emotion-14 emotion-15"
id="end-of-facebook-content"
tabindex="-1"
>
End of Facebook content
</p>
</div>
<noscript />
</div>
</div>
`;
exports[`SocialEmbedContainer Canonical should render a Facebook Video block and unmount correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
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-0 {
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-0 {
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-0 {
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-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
margin-bottom: 1.5rem;
max-width: 31.25rem;
}
min-height:55.5rem .no-js .emotion-2 {
min-height: 0;
}
.emotion-4 {
position: relative;
}
.no-js .emotion-4 {
display: none;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
display: block;
left: 0;
line-height: 1;
padding: 0.75rem;
position: absolute;
-webkit-text-decoration: none;
text-decoration: none;
top: 0;
z-index: 10;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 0.8125rem;
}
}
.emotion-6 span {
color: #222222;
}
.emotion-6:hover span,
.emotion-6:focus span {
color: #B80000;
border-bottom: 2px solid #B80000;
}
.emotion-6:not(:focus):not(:active) {
-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-8 {
margin: 0;
background-color: 'transparent';
}
.emotion-10 {
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-10 .fb_iframe_widget {
position: unset;
}
.emotion-10 .fb_iframe_widget>span {
position: unset;
}
.emotion-10 iframe {
background-color: white;
left: 0;
top: 0;
height: 100%!important;
width: 100%!important;
position: absolute!important;
}
.emotion-12 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
display: block;
color: #545658;
padding: 0.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-12 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
font-size: 0.8125rem;
}
}
.emotion-12>span {
-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-14 {
-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;
}
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<div
class="emotion-2 emotion-3"
data-e2e="facebook-embed-https://www.facebook.com/RickAstley/videos/1378590239249667"
>
<div
class="emotion-4 emotion-5"
>
<a
aria-describedby=":r5:"
class="focusIndicatorRemove emotion-6 emotion-7"
href="#end-of-facebook-content"
>
<span>
Skip Facebook content
</span>
</a>
<div
class="emotion-8 emotion-9"
>
<div
class="emotion-10 emotion-11"
>
<div
id="fb-root"
/>
<script
async="1"
crossorigin="anonymous"
defer="1"
nonce="8pqnGEmE"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v13.0"
/>
<div
class="fb-video"
data-href="https://www.facebook.com/RickAstley/videos/1378590239249667/"
>
<blockquote
cite="https://www.facebook.com/RickAstley/videos/1378590239249667/"
class="fb-xfbml-parse-ignore"
>
<a
href="https://www.facebook.com/RickAstley/videos/1378590239249667/"
/>
<p>
Saw another great gig in LA this week, I went to see Inhaler in the @belascola and they were fantastic! Have a great show in New York tomorrow guys! Rick x @inhalerdublin
</p>
Posted by
<a
href="https://www.facebook.com/RickAstley"
>
Rick Astley
</a>
on Saturday, April 2, 2022
</blockquote>
</div>
</div>
<small
class="emotion-12 emotion-13"
id=":r5:"
>
Warning: The BBC is not responsible for the content of external sites.
</small>
</div>
<p
class="emotion-14 emotion-15"
id="end-of-facebook-content"
tabindex="-1"
>
End of Facebook content
</p>
</div>
<noscript />
</div>
</div>
`;
exports[`SocialEmbedContainer Canonical should render a TikTok block and unmount correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
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-0 {
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-0 {
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-0 {
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-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
margin-bottom: 1.5rem;
max-width: 31.25rem;
min-height: 14rem;
}
.no-js .emotion-2 {
min-height: 0;
}
.emotion-4 {
position: relative;
}
.no-js .emotion-4 {
display: none;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
display: block;
left: 0;
line-height: 1;
padding: 0.75rem;
position: absolute;
-webkit-text-decoration: none;
text-decoration: none;
top: 0;
z-index: 10;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 0.8125rem;
}
}
.emotion-6 span {
color: #222222;
}
.emotion-6:hover span,
.emotion-6:focus span {
color: #B80000;
border-bottom: 2px solid #B80000;
}
.emotion-6:not(:focus):not(:active) {
-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-8 {
margin: 0;
background-color: 'transparent';
}
.emotion-10 {
background-color: #FFFFFF;
padding: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
border: 0.0625rem solid #8A8C8E;
}
.emotion-11 {
color: #141414;
font-size: 1.125rem;
line-height: 1.375rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-11 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-11 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
.emotion-12 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
margin: 1rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-12 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
font-size: 1rem;
line-height: 1.375rem;
}
}
.emotion-12 a {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 0.0625rem solid #141414;
}
.emotion-12 a:visited {
color: #545658;
border-bottom: 0.0625rem solid #545658;
}
.emotion-12 a:hover,
.emotion-12 a:focus {
color: #B80000;
border-bottom: 0.125rem solid #B80000;
}
.emotion-13 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
background-color: #FFFFFF;
border: 0.0625rem solid #8A8C8E;
border-radius: 0;
padding: 0.5rem;
cursor: pointer;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-13 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-13:hover,
.emotion-13:focus {
background-color: #B80000;
color: #FFFFFF;
border: 0.0625rem solid #B80000;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-13:focus-visible {
outline: 0.1875rem solid #000000;
}
.emotion-14 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
display: block;
color: #545658;
padding: 0.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-14 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-14 {
font-size: 0.8125rem;
}
}
.emotion-14>span {
-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-16 {
-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;
}
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<div
class="emotion-2 emotion-3"
data-e2e="tiktok-embed-https://www.tiktok.com/@cuppymusic/video/7086167423639997701"
>
<div
class="emotion-4 emotion-5"
>
<a
aria-describedby=":r3:"
class="focusIndicatorRemove emotion-6 emotion-7"
href="#end-of-tiktok-content"
>
<span>
Skip TikTok content
</span>
</a>
<div
class="emotion-8 emotion-9"
>
<div
class="emotion-10"
data-testid="consentBanner"
id="consentBanner-7086167423639997701"
>
<strong
class="emotion-11"
data-testid="banner-heading"
>
Allow TikTok content?
</strong>
<p
class="emotion-12"
data-testid="banner-body"
>
This article contains content provided by TikTok. We ask for your permission before anything is loaded, as they may be using cookies and other technologies. You may want to read TikTok
<a
aria-label="cookie policy, external"
class="focusIndicatorReducedWidth"
href="https://www.tiktok.com/legal/cookie-policy"
>
cookie policy
</a>
and
<a
aria-label="privacy policy, external"
class="focusIndicatorReducedWidth"
href="https://www.tiktok.com/legal/privacy-policy"
>
privacy policy
</a>
before accepting. To view this content choose 'accept and continue'.
</p>
<button
class="emotion-13"
data-testid="banner-button"
type="button"
>
Accept and continue
</button>
</div>
<small
class="emotion-14 emotion-15"
id=":r3:"
>
Warning: The BBC is not responsible for the content of external sites. TikTok content may contain adverts
</small>
</div>
<p
class="emotion-16 emotion-17"
id="end-of-tiktok-content"
tabindex="-1"
>
End of TikTok content
</p>
</div>
<noscript />
</div>
</div>
`;
exports[`SocialEmbedContainer Canonical should render a Twitter block and unmount correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
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-0 {
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-0 {
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-0 {
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-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
margin-bottom: 1.5rem;
max-width: 31.25rem;
min-height: 14rem;
}
.no-js .emotion-2 {
min-height: 0;
}
.emotion-4 {
position: relative;
}
.no-js .emotion-4 {
display: none;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
display: block;
left: 0;
line-height: 1;
padding: 0.75rem;
position: absolute;
-webkit-text-decoration: none;
text-decoration: none;
top: 0;
z-index: 10;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 0.8125rem;
}
}
.emotion-6 span {
color: #222222;
}
.emotion-6:hover span,
.emotion-6:focus span {
color: #B80000;
border-bottom: 2px solid #B80000;
}
.emotion-6:not(:focus):not(:active) {
-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-8 {
margin: 0;
background-color: 'transparent';
}
.emotion-10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-10 .twitter-tweet {
margin-top: 0!important;
margin-bottom: 10rem!important;
}
.emotion-10 .twitter-tweet-rendered {
margin-bottom: 0!important;
}
.emotion-12 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
display: block;
color: #545658;
padding: 0.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-12 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
font-size: 0.8125rem;
}
}
.emotion-12>span {
-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-14 {
-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;
}
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<div
class="emotion-2 emotion-3"
data-e2e="twitter-embed-https://twitter.com/BBCNews/status/1384138850478346243?s=20"
>
<div
class="emotion-4 emotion-5"
>
<a
aria-describedby=":r0:"
class="focusIndicatorRemove emotion-6 emotion-7"
href="#end-of-twitter-content-1"
>
<span>
Skip Twitter content, 1
</span>
</a>
<div
class="emotion-8 emotion-9"
>
<div
class="emotion-10 emotion-11"
>
<blockquote
class="twitter-tweet"
>
<p
dir="ltr"
lang="en"
>
Greta Thunberg says meeting fellow climate campaigner Sir David Attenborough was "indescribable"
<a
href="https://t.co/xz93WmAdfR"
>
https://t.co/xz93WmAdfR
</a>
</p>
— BBC News (UK) (@BBCNews)
<a
href="https://twitter.com/BBCNews/status/1384138850478346243?ref_src=twsrc%5Etfw"
>
April 19, 2021
</a>
</blockquote>
</div>
<small
class="emotion-12 emotion-13"
id=":r0:"
>
Warning: The BBC is not responsible for the content of external sites.
</small>
</div>
<p
class="emotion-14 emotion-15"
id="end-of-twitter-content-1"
tabindex="-1"
>
End of Twitter content, 1
</p>
</div>
<noscript />
</div>
</div>
`;
exports[`SocialEmbedContainer Canonical should render a YouTube block and unmount correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
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-0 {
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-0 {
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-0 {
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-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
margin-bottom: 1.5rem;
max-width: 31.25rem;
}
min-height:7.0625rem .no-js .emotion-2 {
min-height: 0;
}
.emotion-4 {
position: relative;
}
.no-js .emotion-4 {
display: none;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
display: block;
left: 0;
line-height: 1;
padding: 0.75rem;
position: absolute;
-webkit-text-decoration: none;
text-decoration: none;
top: 0;
z-index: 10;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 0.8125rem;
}
}
.emotion-6 span {
color: #222222;
}
.emotion-6:hover span,
.emotion-6:focus span {
color: #B80000;
border-bottom: 2px solid #B80000;
}
.emotion-6:not(:focus):not(:active) {
-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-8 {
margin: 0;
background-color: 'transparent';
}
.emotion-10 {
background-color: #FFFFFF;
padding: 1rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
border: 0.0625rem solid #8A8C8E;
}
.emotion-11 {
color: #141414;
font-size: 1.125rem;
line-height: 1.375rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-11 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-11 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
.emotion-12 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
margin: 1rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-12 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
font-size: 1rem;
line-height: 1.375rem;
}
}
.emotion-12 a {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
border-bottom: 0.0625rem solid #141414;
}
.emotion-12 a:visited {
color: #545658;
border-bottom: 0.0625rem solid #545658;
}
.emotion-12 a:hover,
.emotion-12 a:focus {
color: #B80000;
border-bottom: 0.125rem solid #B80000;
}
.emotion-13 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
background-color: #FFFFFF;
border: 0.0625rem solid #8A8C8E;
border-radius: 0;
padding: 0.5rem;
cursor: pointer;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-13 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-13:hover,
.emotion-13:focus {
background-color: #B80000;
color: #FFFFFF;
border: 0.0625rem solid #B80000;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-13:focus-visible {
outline: 0.1875rem solid #000000;
}
.emotion-14 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
display: block;
color: #545658;
padding: 0.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-14 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-14 {
font-size: 0.8125rem;
}
}
.emotion-14>span {
-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-16 {
-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;
}
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<div
class="emotion-2 emotion-3"
data-e2e="youtube-embed-https://www.youtube.com/embed/1e05_rwHvOM?feature=oembed"
>
<div
class="emotion-4 emotion-5"
>
<a
aria-describedby=":r2:"
class="focusIndicatorRemove emotion-6 emotion-7"
href="#end-of-youtube-content"
>
<span>
Skip YouTube content
</span>
</a>
<div
class="emotion-8 emotion-9"
>
<div
class="emotion-10"
data-testid="consentBanner"
id="consentBanner-oembed"
>
<strong
class="emotion-11"
data-testid="banner-heading"
>
Allow Google YouTube content?
</strong>
<p
class="emotion-12"
data-testid="banner-body"
>
This article contains content provided by Google YouTube. We ask for your permission before anything is loaded, as they may be using cookies and other technologies. You may want to read Google YouTube
<a
aria-label="cookie policy, external"
class="focusIndicatorReducedWidth"
href="https://policies.google.com/technologies/cookies"
>
cookie policy
</a>
and
<a
aria-label="privacy policy, external"
class="focusIndicatorReducedWidth"
href="https://policies.google.com/privacy"
>
privacy policy
</a>
before accepting. To view this content choose 'accept and continue'.
</p>
<button
class="emotion-13"
data-testid="banner-button"
type="button"
>
Accept and continue
</button>
</div>
<small
class="emotion-14 emotion-15"
id=":r2:"
>
Warning: The BBC is not responsible for the content of external sites. YouTube content may contain adverts
</small>
</div>
<p
class="emotion-16 emotion-17"
id="end-of-youtube-content"
tabindex="-1"
>
End of YouTube content
</p>
</div>
<noscript />
</div>
</div>
`;
exports[`SocialEmbedContainer Canonical should render an Instagram block and unmount correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
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-0 {
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-0 {
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-0 {
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-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
margin-bottom: 1.5rem;
max-width: 31.25rem;
min-height: 14rem;
}
.no-js .emotion-2 {
min-height: 0;
}
.emotion-4 {
position: relative;
}
.no-js .emotion-4 {
display: none;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
display: block;
left: 0;
line-height: 1;
padding: 0.75rem;
position: absolute;
-webkit-text-decoration: none;
text-decoration: none;
top: 0;
z-index: 10;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-6 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-6 {
font-size: 0.8125rem;
}
}
.emotion-6 span {
color: #222222;
}
.emotion-6:hover span,
.emotion-6:focus span {
color: #B80000;
border-bottom: 2px solid #B80000;
}
.emotion-6:not(:focus):not(:active) {
-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-8 {
margin: 0;
background-color: 'transparent';
}
.emotion-10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.emotion-10 .instagram-media {
margin-top: 0!important;
margin-bottom: 0!important;
min-width: auto!important;
}
.emotion-12 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
display: block;
color: #545658;
padding: 0.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-12 {
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
font-size: 0.8125rem;
}
}
.emotion-12>span {
-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-14 {
-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;
}
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<div
class="emotion-2 emotion-3"
data-e2e="instagram-embed-https://www.instagram.com/p/CgNAEjOK46_"
>
<div
class="emotion-4 emotion-5"
>
<a
aria-describedby=":r1:"
class="focusIndicatorRemove emotion-6 emotion-7"
href="#end-of-instagram-content-1"
>
<span>
Skip Instagram content, 1
</span>
</a>
<div
class="emotion-8 emotion-9"
>
<div
class="emotion-10 emotion-11"
>
<blockquote
class="instagram-media"
data-instgrm-captioned=""
data-instgrm-permalink="https://www.instagram.com/p/CgNAEjOK46_"
>
<p>
<a
href="https://www.instagram.com/p/CgNAEjOK46_"
style="color:#000"
>
© 2020 Instagram
</a>
</p>
</blockquote>
<script
async=""
src="https://www.instagram.com/embed.js"
/>
</div>
<small
class="emotion-12 emotion-13"
id=":r1:"
>
Warning: The BBC is not responsible for the content of external sites.
</small>
</div>
<p
class="emotion-14 emotion-15"
id="end-of-instagram-content-1"
tabindex="-1"
>
End of Instagram content, 1
</p>
</div>
<noscript />
</div>
</div>
`;