src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CpsRecommendations should not render when cpsRecommendations toggle is disabled 1`] = `<div />`;
exports[`CpsRecommendations should not render when the service does not support recommendations 1`] = `<div />`;
exports[`CpsRecommendations should not render when there is no recommendations data 1`] = `<div />`;
exports[`CpsRecommendations should render when cpsRecommendations toggle is enabled and the service supports recommendations for a single item 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
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;
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;
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;
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;
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 {
background-color: #F6F6F6;
margin: 1.5rem 0;
padding: 1rem 0.5rem;
}
@media (min-width: 25rem) {
.emotion-2 {
margin: 0 0 1.5rem;
padding: 0 1rem 1rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin: 0 0 1.5rem;
padding: 1rem 0;
}
}
.emotion-4 {
position: relative;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
color: #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: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-9 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
margin: 0;
padding: 0;
}
@media (min-width: 37.5rem) {
.emotion-9 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-9 {
margin-bottom: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-9 {
margin: 0 0 0.5rem;
}
}
.emotion-11 {
margin: 0;
padding: 0;
}
.emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-15 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
min-height: 2.75rem;
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
@media (min-width: 37.5rem) {
.emotion-15 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-17 {
font-size: 1.125rem;
line-height: 1.5rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #F6F6F6;
margin: 1rem 0;
padding-right: 0.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1.25rem;
line-height: 1.625rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
padding-right: 1rem;
}
}
@supports (display: grid) {
.emotion-19 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-19 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-19 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-19 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-19 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-19 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-19 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
}
.emotion-21 {
position: relative;
padding: 0.5rem;
margin-top: 0.5rem;
background-color: #FDFDFD;
}
.emotion-23 {
display: inline-block;
position: relative;
width: 4.7rem;
vertical-align: top;
}
@media (min-width: 25rem) {
.emotion-23 {
width: 6.8rem;
}
}
@media (min-width: 37.5rem) {
.emotion-23 {
width: 7.5rem;
}
}
.emotion-25 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-25 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-25 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-27 {
display: inline-block;
width: calc(100% - 7.5rem);
padding: 0 0.5rem;
vertical-align: top;
height: 100%;
}
@media (max-width: 24.9375rem) {
.emotion-27 {
width: calc(100% - 5rem);
}
}
@media (min-width: 37.5rem) {
.emotion-27 {
padding: 0 1rem;
}
}
.emotion-29 {
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
color: #141414;
margin: 0;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-29 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-29 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-31 {
position: static;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
}
.emotion-31:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-31:hover,
.emotion-31:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-31:visited {
color: #6E6E73;
}
.emotion-33 {
-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>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<section
aria-labelledby="recommendations-heading"
class="emotion-2 emotion-3"
data-e2e="recommendations-heading"
role="region"
>
<div
class="emotion-4 emotion-5"
>
<a
class="emotion-6 emotion-7"
href="#end-of-recommendations"
>
Saltar Recomendamos y continuar leyendo
</a>
<div
class="emotion-8 emotion-9 emotion-10"
>
<strong
class="emotion-11 emotion-12"
>
<span
class="emotion-13 emotion-14"
>
<span
class="emotion-15 emotion-16"
>
<span
class="emotion-17 emotion-18"
dir="ltr"
id="recommendations-heading"
>
Recomendamos
</span>
</span>
</span>
</strong>
</div>
<div
class="emotion-19 emotion-1"
dir="ltr"
>
<div
class="emotion-21 emotion-22"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-23 emotion-24"
>
<div
class="emotion-25 emotion-26"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-27 emotion-28"
>
<div
class="emotion-29 emotion-30"
>
<a
class="emotion-31 emotion-32"
href="/mundo/noticias-53377054"
>
La conmovedora historia de cómo una madre y el hombre preso por la muerte de su hija se unieron para atrapar al verdadero asesino
</a>
</div>
</div>
</div>
</div>
<p
class="emotion-33 emotion-34"
id="end-of-recommendations"
tabindex="-1"
>
Final de Recomendamos
</p>
</div>
</section>
</div>
</div>
`;
exports[`CpsRecommendations should render when cpsRecommendations toggle is enabled and the service supports recommendations for multiple items 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
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;
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;
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;
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;
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 {
background-color: #F6F6F6;
margin: 1.5rem 0;
padding: 1rem 0.5rem;
}
@media (min-width: 25rem) {
.emotion-2 {
margin: 0 0 1.5rem;
padding: 0 1rem 1rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin: 0 0 1.5rem;
padding: 1rem 0;
}
}
.emotion-4 {
position: relative;
}
.emotion-6 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
color: #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: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-9 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
margin: 0;
padding: 0;
}
@media (min-width: 37.5rem) {
.emotion-9 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-9 {
margin-bottom: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-9 {
margin: 0 0 0.5rem;
}
}
.emotion-11 {
margin: 0;
padding: 0;
}
.emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-15 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
min-height: 2.75rem;
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
@media (min-width: 37.5rem) {
.emotion-15 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-17 {
font-size: 1.125rem;
line-height: 1.5rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #F6F6F6;
margin: 1rem 0;
padding-right: 0.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1.25rem;
line-height: 1.625rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
padding-right: 1rem;
}
}
.emotion-20 {
list-style-type: none;
margin: 0;
padding: 0;
}
@supports (display: grid) {
.emotion-20 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
}
.emotion-23:last-child {
border: none;
}
@supports (display: grid) {
.emotion-23 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 80rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
}
@supports (display: grid) {
.emotion-25 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
}
.emotion-27 {
position: relative;
padding: 0.5rem;
margin-top: 0.5rem;
background-color: #FDFDFD;
}
.emotion-29 {
display: inline-block;
position: relative;
width: 4.7rem;
vertical-align: top;
}
@media (min-width: 25rem) {
.emotion-29 {
width: 6.8rem;
}
}
@media (min-width: 37.5rem) {
.emotion-29 {
width: 7.5rem;
}
}
.emotion-31 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-31 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-31 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-33 {
display: inline-block;
width: calc(100% - 7.5rem);
padding: 0 0.5rem;
vertical-align: top;
height: 100%;
}
@media (max-width: 24.9375rem) {
.emotion-33 {
width: calc(100% - 5rem);
}
}
@media (min-width: 37.5rem) {
.emotion-33 {
padding: 0 1rem;
}
}
.emotion-35 {
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
color: #141414;
margin: 0;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-35 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-35 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-37 {
position: static;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
}
.emotion-37:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-37:hover,
.emotion-37:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-37:visited {
color: #6E6E73;
}
.emotion-90 {
-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>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<section
aria-labelledby="recommendations-heading"
class="emotion-2 emotion-3"
data-e2e="recommendations-heading"
role="region"
>
<div
class="emotion-4 emotion-5"
>
<a
class="emotion-6 emotion-7"
href="#end-of-recommendations"
>
Saltar Recomendamos y continuar leyendo
</a>
<div
class="emotion-8 emotion-9 emotion-10"
>
<strong
class="emotion-11 emotion-12"
>
<span
class="emotion-13 emotion-14"
>
<span
class="emotion-15 emotion-16"
>
<span
class="emotion-17 emotion-18"
dir="ltr"
id="recommendations-heading"
>
Recomendamos
</span>
</span>
</span>
</strong>
</div>
<ul
class="emotion-1 emotion-20 emotion-21"
dir="ltr"
role="list"
>
<li
class="emotion-1 emotion-23 emotion-24"
dir="ltr"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="ltr"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/mundo/noticias-53377054"
>
La conmovedora historia de cómo una madre y el hombre preso por la muerte de su hija se unieron para atrapar al verdadero asesino
</a>
</div>
</div>
</div>
</div>
</li>
<li
class="emotion-1 emotion-23 emotion-24"
dir="ltr"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="ltr"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/mundo/noticias-america-latina-52884902"
>
Coronavirus en Colombia | El caso de la vigilante Edy Fonseca: "Me retuvieron en un edificio de clase alta durante la pandemia, lo acepté y me siento culpable"
</a>
</div>
</div>
</div>
</div>
</li>
<li
class="emotion-1 emotion-23 emotion-24"
dir="ltr"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="ltr"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/mundo/noticias-internacional-53113381"
>
Soy una mujer genocida y aún me persiguen los recuerdos de lo que hice
</a>
</div>
</div>
</div>
</div>
</li>
<li
class="emotion-1 emotion-23 emotion-24"
dir="ltr"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="ltr"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/mundo/vert-cul-53370542"
>
Estrenos 2020: las 10 mejores películas de lo que va del año según la BBC (y que seguramente no pudiste ver en el cine)
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<p
class="emotion-90 emotion-91"
id="end-of-recommendations"
tabindex="-1"
>
Final de Recomendamos
</p>
</div>
</section>
</div>
</div>
`;
exports[`CpsRecommendations should render when cpsRecommendations toggle is enabled and the service supports recommendations for rtl service 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
margin-right: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
margin-right: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
margin-right: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
margin-right: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-right: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-right: 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;
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;
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;
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;
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 {
background-color: #F6F6F6;
margin: 1.5rem 0;
padding: 1rem 0.5rem;
}
@media (min-width: 25rem) {
.emotion-2 {
margin: 0 0 1.5rem;
padding: 0 1rem 1rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin: 0 0 1.5rem;
padding: 1rem 0;
}
}
.emotion-4 {
position: relative;
}
.emotion-6 {
font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 0.875rem;
line-height: 1rem;
background-color: #FFFFFF;
border: 0.125rem solid #222222;
color: #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: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-9 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
margin: 0;
padding: 0;
}
@media (min-width: 37.5rem) {
.emotion-9 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-9 {
margin-bottom: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-9 {
margin: 0 0 0.5rem;
}
}
.emotion-11 {
margin: 0;
padding: 0;
}
.emotion-13 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-15 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
min-height: 2.75rem;
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
@media (min-width: 37.5rem) {
.emotion-15 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-17 {
font-size: 1.25rem;
line-height: 1.75rem;
font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #F6F6F6;
margin: 1rem 0;
padding-left: 0.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-17 {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
font-size: 1.5rem;
line-height: 2rem;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-17 {
padding-left: 1rem;
}
}
.emotion-20 {
list-style-type: none;
margin: 0;
padding: 0;
}
@supports (display: grid) {
.emotion-20 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-20 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
}
.emotion-23:last-child {
border: none;
}
@supports (display: grid) {
.emotion-23 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
@media (min-width: 80rem) {
.emotion-23 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
}
}
}
@supports (display: grid) {
.emotion-25 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-25 {
grid-template-columns: repeat(1, 1fr);
grid-column-end: span 1;
grid-column-gap: 1rem;
}
}
}
.emotion-27 {
position: relative;
padding: 0.5rem;
margin-top: 0.5rem;
background-color: #FDFDFD;
}
.emotion-29 {
display: inline-block;
position: relative;
width: 4.7rem;
vertical-align: top;
}
@media (min-width: 25rem) {
.emotion-29 {
width: 6.8rem;
}
}
@media (min-width: 37.5rem) {
.emotion-29 {
width: 7.5rem;
}
}
.emotion-31 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-31 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-31 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-33 {
display: inline-block;
width: calc(100% - 7.5rem);
padding: 0 0.5rem;
vertical-align: top;
height: 100%;
}
@media (max-width: 24.9375rem) {
.emotion-33 {
width: calc(100% - 5rem);
}
}
@media (min-width: 37.5rem) {
.emotion-33 {
padding: 0 1rem;
}
}
.emotion-35 {
font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.5rem;
color: #141414;
margin: 0;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-35 {
font-size: 1rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-35 {
font-size: 1rem;
line-height: 1.5rem;
}
}
.emotion-37 {
position: static;
color: #141414;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
}
.emotion-37:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-37:hover,
.emotion-37:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-37:visited {
color: #6E6E73;
}
.emotion-90 {
-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>
<div
class="emotion-0 emotion-1"
dir="rtl"
>
<section
aria-labelledby="recommendations-heading"
class="emotion-2 emotion-3"
data-e2e="recommendations-heading"
role="region"
>
<div
class="emotion-4 emotion-5"
>
<a
class="emotion-6 emotion-7"
href="#end-of-recommendations"
>
تخطى قصص مقترحة وواصل القراءة
</a>
<div
class="emotion-8 emotion-9 emotion-10"
>
<strong
class="emotion-11 emotion-12"
>
<span
class="emotion-13 emotion-14"
>
<span
class="emotion-15 emotion-16"
>
<span
class="emotion-17 emotion-18"
dir="rtl"
id="recommendations-heading"
>
قصص مقترحة
</span>
</span>
</span>
</strong>
</div>
<ul
class="emotion-1 emotion-20 emotion-21"
dir="rtl"
role="list"
>
<li
class="emotion-1 emotion-23 emotion-24"
dir="rtl"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="rtl"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.21212121212121%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/arabic/middleeast-53329495"
>
الصراع في سوريا: الأمم المتحدة تقول إن جرائم حرب "فظيعة" ارتكبت في معركة ادلب
</a>
</div>
</div>
</div>
</div>
</li>
<li
class="emotion-1 emotion-23 emotion-24"
dir="rtl"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="rtl"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/arabic/middleeast-53146050"
>
الحرب في ليبيا: الرئيس الفرنسي ماكرون يقول إن تركيا تمارس "لعبة خطرة" في ليبيا
</a>
</div>
</div>
</div>
</div>
</li>
<li
class="emotion-1 emotion-23 emotion-24"
dir="rtl"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="rtl"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/arabic/middleeast-52959311"
>
ليبيا: هل يخوض أردوغان مغامرة وقودها السوريون؟
</a>
</div>
</div>
</div>
</div>
</li>
<li
class="emotion-1 emotion-23 emotion-24"
dir="rtl"
role="listitem"
>
<div
class="emotion-25 emotion-1"
dir="rtl"
>
<div
class="emotion-27 emotion-28"
data-e2e="story-promo-wrapper"
>
<div
class="emotion-29 emotion-30"
>
<div
class="emotion-31 emotion-32"
data-e2e="image-placeholder"
style="padding-bottom: 56.25%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-33 emotion-34"
>
<div
class="emotion-35 emotion-36"
>
<a
class="emotion-37 emotion-38"
href="/arabic/inthepress-52320329"
>
صحف بريطانية تناقش "الاختبار" الروسي في الشرق الأوسط و"العلاجات الدجلية" لفيروس كورونا
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<p
class="emotion-90 emotion-91"
id="end-of-recommendations"
tabindex="-1"
>
قصص مقترحة نهاية
</p>
</div>
</section>
</div>
</div>
`;