src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`IndexPageSection Container assertions should render empty text if the strapline is empty and is not the 1st section 1`] = `HTMLCollection []`;
exports[`IndexPageSection Container assertions should render text if the strapline is empty and is the 1st section 1`] = `
HTMLCollection [
.emotion-0 {
margin: 0 auto;
width: 100%;
}
@media (min-width: 63rem) {
.emotion-0 {
max-width: 63rem;
}
}
.emotion-2 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin-bottom: 1.5rem;
}
}
.emotion-4 {
margin: 0;
padding: 0;
}
.emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-8 {
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-8 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-10 {
font-size: 1.125rem;
line-height: 1.375rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #FDFDFD;
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-10 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
padding-right: 1rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
margin-top: 0.5rem;
}
}
@media (min-width: 63rem) {
.emotion-12 {
margin-top: 2rem;
}
}
.emotion-15 {
list-style-type: none;
margin: 0;
padding: 0;
}
@supports (display: grid) {
.emotion-15 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-15 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-15 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
}
.emotion-18 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-18 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-18:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-18 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-18 {
padding: 0 0 1.5rem;
}
}
.emotion-18:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-18:first-child {
padding-top: 1rem;
}
}
.emotion-18:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-18 {
width: calc(8/8*(100% - 8 * 1rem) + 7 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-18 {
width: calc(8/8*(100% - 8 * 1rem) + 7 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-18 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-18 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
}
}
@media (min-width: 80rem) {
.emotion-18 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
}
}
}
.emotion-20 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-20 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-20 {
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-20 {
grid-template-columns: repeat(12, 1fr);
}
}
}
.emotion-22 {
display: inline-block;
vertical-align: top;
position: relative;
margin-bottom: 0.5rem;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-22 {
width: calc(50% - 0.5rem);
margin-bottom: 0;
}
}
@media (min-width: 63rem) {
.emotion-22 {
width: calc(50% - 0.5rem);
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-22 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 79.9375rem) {
.emotion-22 {
grid-column: 1/span 3;
}
}
}
.emotion-24 {
position: relative;
}
.emotion-26 {
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-26 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-26 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-27 {
width: 100%;
object-fit: cover;
height: auto;
}
.emotion-28 {
position: absolute;
bottom: 0;
}
.emotion-28>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
.emotion-30 {
display: inline-block;
vertical-align: top;
}
@media (min-width: 37.5rem) {
.emotion-30 {
width: 50%;
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-30 {
width: 50%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-30 {
display: block;
width: initial;
padding: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-30 {
grid-column: 4/span 3;
}
}
@media (min-width: 80rem) {
.emotion-30 {
grid-column: 7/span 6;
}
}
}
.emotion-32 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-32 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
@media (min-width: 37.5rem) {
.emotion-32 {
font-size: 1.75rem;
line-height: 2rem;
}
}
.emotion-34 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
overflow-wrap: anywhere;
}
.emotion-34:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-34:hover,
.emotion-34:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-34:visited {
color: #6E6E73;
}
.emotion-36 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-36 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-36 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-36 {
display: none;
visibility: hidden;
}
}
.emotion-38 {
font-size: 0.875rem;
line-height: 1.125rem;
color: #545658;
display: block;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-38 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-38 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
.emotion-41 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-41 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-41:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-41 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-41 {
padding: 0 0 1.5rem;
}
}
.emotion-41:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-41:first-child {
padding-top: 1rem;
}
}
.emotion-41:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-41 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-41 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-41 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-41 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
@media (min-width: 80rem) {
.emotion-41 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
}
.emotion-43 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-43 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-43 {
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) {
.emotion-43 {
display: block;
}
}
}
.emotion-45 {
display: inline-block;
vertical-align: top;
position: relative;
width: 33.33%;
}
@media (min-width: 63rem) {
.emotion-45 {
display: block;
width: 100%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-45 {
width: initial;
grid-column: 1/span 2;
}
}
@media (min-width: 25rem) {
.emotion-51 {
position: absolute;
bottom: 0;
}
}
.emotion-51>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
@media (max-width: 24.9375rem) {
.emotion-51>* {
height: 1.25rem;
padding: 0.25rem 0.25rem 0;
}
}
.emotion-53 {
display: inline-block;
vertical-align: top;
width: 66.67%;
padding: 0 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-53 {
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-53 {
display: block;
width: 100%;
padding: 0.5rem 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-53 {
display: block;
width: initial;
padding: initial;
grid-column: 3/span 4;
}
@media (min-width: 63rem) {
.emotion-53 {
padding-top: 0.5rem;
}
}
}
.emotion-55 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-55 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-55 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-59 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-59 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-59 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-59 {
display: none;
visibility: hidden;
}
}
@media (min-width: 63rem) {
.emotion-59 {
display: none;
visibility: hidden;
}
}
<section
aria-labelledby="Top-Stories"
class="emotion-0 emotion-1"
role="region"
>
<div
class="emotion-2 emotion-3"
>
<h2
class="emotion-4 emotion-5"
>
<span
class="emotion-6 emotion-7"
>
<span
class="emotion-8 emotion-9"
>
<span
class="emotion-10 emotion-11"
dir="ltr"
id="Top-Stories"
>
Top Stories
</span>
</span>
</span>
</h2>
</div>
<div
class="emotion-12 emotion-13"
>
<ul
class="emotion-14 emotion-15 emotion-16"
dir="ltr"
role="list"
>
<li
class="emotion-14 emotion-18 emotion-19"
dir="ltr"
>
<div
class="emotion-20 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-22 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 1"
class="emotion-27"
height="1152"
sizes="(min-width: 1100px) 496px, (min-width: 600px) 45.83vw, 94.29vw"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image1.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image1.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image1.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image1.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image1.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image1.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-28 emotion-29"
/>
</div>
</div>
<div
class="emotion-30 emotion-31"
dir="ltr"
>
<h3
class="emotion-32 emotion-33"
>
<a
aria-labelledby="promo-1"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-1"
>
Top Story 1 headline
</span>
</a>
</h3>
<p
class="emotion-36 emotion-37"
>
Summary text 1
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 Jenụwarị 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 2"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image2.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image2.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image2.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image2.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image2.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image2.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-1"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-1"
>
Top Story 2 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 2
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 Jenụwarị 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 3"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image3.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image3.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image3.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image3.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image3.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image3.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image3.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image3.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-2"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-2"
>
Top Story 3 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 3
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 Jenụwarị 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 4"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image4.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image4.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image4.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image4.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image4.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image4.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image4.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image4.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-3"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-3"
>
Top Story 4 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 4
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 Jenụwarị 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 5"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image5.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image5.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image5.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image5.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image5.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image5.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image5.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image5.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-4"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-4"
>
Top Story 5 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 5
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 Jenụwarị 1970
</time>
</div>
</div>
</li>
</ul>
</div>
</section>,
]
`;
exports[`IndexPageSection Container snapshots should render correctly for canonical 1`] = `
.emotion-0 {
margin: 0 auto;
width: 100%;
}
@media (min-width: 63rem) {
.emotion-0 {
max-width: 63rem;
}
}
.emotion-2 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin-bottom: 1.5rem;
}
}
.emotion-4 {
margin: 0;
padding: 0;
}
.emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-8 {
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-8 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-10 {
font-size: 1.125rem;
line-height: 1.375rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #FDFDFD;
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-10 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
padding-right: 1rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
margin-top: 0.5rem;
}
}
@media (min-width: 63rem) {
.emotion-12 {
margin-top: 2rem;
}
}
.emotion-15 {
list-style-type: none;
margin: 0;
padding: 0;
}
@supports (display: grid) {
.emotion-15 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-15 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-15 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-15 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
}
.emotion-18 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-18 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-18:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-18 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-18 {
padding: 0 0 1.5rem;
}
}
.emotion-18:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-18:first-child {
padding-top: 1rem;
}
}
.emotion-18:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-18 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-18 {
width: calc(8/8*(100% - 8 * 1rem) + 7 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-18 {
width: calc(8/8*(100% - 8 * 1rem) + 7 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-18 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-18 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-18 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
}
}
@media (min-width: 80rem) {
.emotion-18 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
}
}
}
.emotion-20 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-20 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-20 {
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-20 {
grid-template-columns: repeat(12, 1fr);
}
}
}
.emotion-22 {
display: inline-block;
vertical-align: top;
position: relative;
margin-bottom: 0.5rem;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-22 {
width: calc(50% - 0.5rem);
margin-bottom: 0;
}
}
@media (min-width: 63rem) {
.emotion-22 {
width: calc(50% - 0.5rem);
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-22 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 79.9375rem) {
.emotion-22 {
grid-column: 1/span 3;
}
}
}
.emotion-24 {
position: relative;
}
.emotion-26 {
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-26 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-26 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-27 {
width: 100%;
object-fit: cover;
height: auto;
}
.emotion-28 {
position: absolute;
bottom: 0;
}
.emotion-28>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
.emotion-30 {
display: inline-block;
vertical-align: top;
}
@media (min-width: 37.5rem) {
.emotion-30 {
width: 50%;
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-30 {
width: 50%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-30 {
display: block;
width: initial;
padding: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-30 {
grid-column: 4/span 3;
}
}
@media (min-width: 80rem) {
.emotion-30 {
grid-column: 7/span 6;
}
}
}
.emotion-32 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-32 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
@media (min-width: 37.5rem) {
.emotion-32 {
font-size: 1.75rem;
line-height: 2rem;
}
}
.emotion-34 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
overflow-wrap: anywhere;
}
.emotion-34:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-34:hover,
.emotion-34:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-34:visited {
color: #6E6E73;
}
.emotion-36 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-36 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-36 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-36 {
display: none;
visibility: hidden;
}
}
.emotion-38 {
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;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-38 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-38 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
.emotion-41 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-41 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-41:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-41 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-41 {
padding: 0 0 1.5rem;
}
}
.emotion-41:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-41:first-child {
padding-top: 1rem;
}
}
.emotion-41:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-41 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-41 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-41 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-41 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-41 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-41 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
@media (min-width: 80rem) {
.emotion-41 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
}
.emotion-43 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-43 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-43 {
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) {
.emotion-43 {
display: block;
}
}
}
.emotion-45 {
display: inline-block;
vertical-align: top;
position: relative;
width: 33.33%;
}
@media (min-width: 63rem) {
.emotion-45 {
display: block;
width: 100%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-45 {
width: initial;
grid-column: 1/span 2;
}
}
@media (min-width: 25rem) {
.emotion-51 {
position: absolute;
bottom: 0;
}
}
.emotion-51>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
@media (max-width: 24.9375rem) {
.emotion-51>* {
height: 1.25rem;
padding: 0.25rem 0.25rem 0;
}
}
.emotion-53 {
display: inline-block;
vertical-align: top;
width: 66.67%;
padding: 0 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-53 {
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-53 {
display: block;
width: 100%;
padding: 0.5rem 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-53 {
display: block;
width: initial;
padding: initial;
grid-column: 3/span 4;
}
@media (min-width: 63rem) {
.emotion-53 {
padding-top: 0.5rem;
}
}
}
.emotion-55 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-55 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-55 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-59 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-59 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-59 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-59 {
display: none;
visibility: hidden;
}
}
@media (min-width: 63rem) {
.emotion-59 {
display: none;
visibility: hidden;
}
}
<div>
<section
aria-labelledby="Top-Stories"
class="emotion-0 emotion-1"
role="region"
>
<div
class="emotion-2 emotion-3"
>
<h2
class="emotion-4 emotion-5"
>
<span
class="emotion-6 emotion-7"
>
<span
class="emotion-8 emotion-9"
>
<span
class="emotion-10 emotion-11"
dir="ltr"
id="Top-Stories"
>
Top Stories
</span>
</span>
</span>
</h2>
</div>
<div
class="emotion-12 emotion-13"
>
<ul
class="emotion-14 emotion-15 emotion-16"
dir="ltr"
role="list"
>
<li
class="emotion-14 emotion-18 emotion-19"
dir="ltr"
>
<div
class="emotion-20 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-22 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 1"
class="emotion-27"
height="1152"
sizes="(min-width: 1100px) 496px, (min-width: 600px) 45.83vw, 94.29vw"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image1.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image1.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image1.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image1.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image1.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image1.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-28 emotion-29"
/>
</div>
</div>
<div
class="emotion-30 emotion-31"
dir="ltr"
>
<h3
class="emotion-32 emotion-33"
>
<a
aria-labelledby="promo-1"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-1"
>
Top Story 1 headline
</span>
</a>
</h3>
<p
class="emotion-36 emotion-37"
>
Summary text 1
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 2"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image2.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image2.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image2.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image2.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image2.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image2.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-1"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-1"
>
Top Story 2 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 2
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 3"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image3.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image3.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image3.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image3.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image3.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image3.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image3.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image3.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-2"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-2"
>
Top Story 3 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 3
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 4"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image4.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image4.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image4.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image4.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image4.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image4.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image4.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image4.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-3"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-3"
>
Top Story 4 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 4
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-14 emotion-41 emotion-19"
dir="ltr"
>
<div
class="emotion-43 emotion-21"
data-e2e="story-promo"
>
<div
class="emotion-45 emotion-23"
dir="ltr"
>
<div
class="emotion-24 emotion-25"
>
<div
class="emotion-26"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 5"
class="emotion-27"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image5.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image5.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image5.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image5.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image5.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image5.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image5.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image5.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-51 emotion-29"
/>
</div>
</div>
<div
class="emotion-53 emotion-31"
dir="ltr"
>
<h3
class="emotion-55 emotion-33"
>
<a
aria-labelledby="promo-top-stories-4"
class="focusIndicatorDisplayInlineBlock emotion-34 emotion-35"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-4"
>
Top Story 5 headline
</span>
</a>
</h3>
<p
class="emotion-59 emotion-37"
>
Summary text 5
</p>
<time
class="emotion-38 emotion-39"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
`;
exports[`IndexPageSection Container snapshots should render correctly with a linking strapline 1`] = `
.emotion-0 {
margin: 0 auto;
width: 100%;
}
@media (min-width: 63rem) {
.emotion-0 {
max-width: 63rem;
}
}
.emotion-2 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin-bottom: 1.5rem;
}
}
.emotion-4 {
margin: 0;
padding: 0;
}
.emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-8 {
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-8 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-10 {
font-size: 1.125rem;
line-height: 1.375rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #FDFDFD;
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-10 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
padding-right: 1rem;
}
}
.emotion-13 {
list-style-type: none;
margin: 0;
padding: 0;
}
@supports (display: grid) {
.emotion-13 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-13 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-13 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
}
.emotion-16 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-16 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-16:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-16 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-16 {
padding: 0 0 1.5rem;
}
}
.emotion-16:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-16:first-child {
padding-top: 1rem;
}
}
.emotion-16:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-16 {
width: calc(6/8*(100% - 8 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-16 {
width: calc(6/8*(100% - 8 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-16 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 80rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
}
.emotion-18 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-18 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-18 {
grid-column-gap: 1rem;
}
}
}
.emotion-20 {
display: inline-block;
vertical-align: top;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-20 {
padding-right: 0.5rem;
width: 50%;
}
}
@media (min-width: 63rem) {
.emotion-20 {
width: 33.33%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-20 {
display: block;
width: initial;
padding: initial;
padding: 0;
width: 100%;
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
@media (min-width: 37.5rem) {
.emotion-20 {
grid-template-columns: repeat(3, 1fr);
grid-column-end: span 3;
}
}
@media (min-width: 63rem) {
.emotion-20 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
}
@media (max-width: 62.9375rem) {
.emotion-20>time {
padding-bottom: 0.5rem;
}
}
.emotion-22 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.125rem;
line-height: 1.375rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-22 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-22 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
.emotion-24 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
overflow-wrap: anywhere;
}
.emotion-24:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-24:hover,
.emotion-24:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-24:visited {
color: #6E6E73;
}
.emotion-26 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-26 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-26 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-26 {
display: none;
visibility: hidden;
}
}
@media (min-width: 63rem) {
.emotion-26 {
display: none;
visibility: hidden;
}
}
.emotion-28 {
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;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-28 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-28 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
.emotion-30 {
display: inline-block;
vertical-align: top;
position: relative;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-30 {
padding-right: 0.5rem;
width: 50%;
}
}
@media (min-width: 63rem) {
.emotion-30 {
width: 66.67%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-30 {
width: initial;
padding: 0;
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
@media (min-width: 37.5rem) {
.emotion-30 {
grid-template-columns: repeat(3, 1fr);
grid-column-end: span 3;
}
}
@media (min-width: 63rem) {
.emotion-30 {
grid-template-columns: repeat(4, 1fr);
grid-column-end: span 4;
}
}
}
.emotion-32 {
position: relative;
}
.emotion-34 {
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-34 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-34 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-35 {
width: 100%;
object-fit: cover;
height: auto;
}
.emotion-36 {
position: absolute;
bottom: 0;
}
.emotion-36>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
.emotion-39 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-39 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-39:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-39 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-39 {
padding: 0 0 1.5rem;
}
}
.emotion-39:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-39:first-child {
padding-top: 1rem;
}
}
.emotion-39:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-39 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-39 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-39 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-39 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
@media (min-width: 80rem) {
.emotion-39 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
}
.emotion-41 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-41 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-41 {
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) {
.emotion-41 {
display: block;
}
}
}
.emotion-43 {
display: inline-block;
vertical-align: top;
position: relative;
width: 33.33%;
}
@media (min-width: 63rem) {
.emotion-43 {
display: block;
width: 100%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-43 {
width: initial;
grid-column: 1/span 2;
}
}
@media (min-width: 25rem) {
.emotion-49 {
position: absolute;
bottom: 0;
}
}
.emotion-49>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
@media (max-width: 24.9375rem) {
.emotion-49>* {
height: 1.25rem;
padding: 0.25rem 0.25rem 0;
}
}
.emotion-51 {
display: inline-block;
vertical-align: top;
width: 66.67%;
padding: 0 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-51 {
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-51 {
display: block;
width: 100%;
padding: 0.5rem 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-51 {
display: block;
width: initial;
padding: initial;
grid-column: 3/span 4;
}
@media (min-width: 63rem) {
.emotion-51 {
padding-top: 0.5rem;
}
}
}
.emotion-53 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-53 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-53 {
font-size: 1rem;
line-height: 1.25rem;
}
}
<div>
<section
aria-labelledby="Top-Stories"
class="emotion-0 emotion-1"
role="region"
>
<div
class="emotion-2 emotion-3"
>
<h2
class="emotion-4 emotion-5"
>
<span
class="emotion-6 emotion-7"
>
<span
class="emotion-8 emotion-9"
>
<span
class="emotion-10 emotion-11"
dir="ltr"
id="Top-Stories"
>
Top Stories
</span>
</span>
</span>
</h2>
</div>
<ul
class="emotion-12 emotion-13 emotion-14"
dir="ltr"
role="list"
>
<li
class="emotion-12 emotion-16 emotion-17"
dir="ltr"
>
<div
class="emotion-18 emotion-19"
data-e2e="story-promo"
>
<div
class="emotion-20 emotion-21"
dir="ltr"
>
<h3
class="emotion-22 emotion-23"
>
<a
aria-labelledby="promo-top-stories-1"
class="focusIndicatorDisplayInlineBlock emotion-24 emotion-25"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-1"
>
Top Story 1 headline
</span>
</a>
</h3>
<p
class="emotion-26 emotion-27"
>
Summary text 1
</p>
<time
class="emotion-28 emotion-29"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
<div
class="emotion-30 emotion-31"
dir="ltr"
>
<div
class="emotion-32 emotion-33"
>
<div
class="emotion-34"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 1"
class="emotion-35"
height="1152"
loading="lazy"
sizes="(min-width: 1100px) 496px, (min-width: 600px) 45.83vw, 94.29vw"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image1.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image1.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image1.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image1.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image1.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image1.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-36 emotion-37"
/>
</div>
</div>
</div>
</li>
<li
class="emotion-12 emotion-39 emotion-17"
dir="ltr"
>
<div
class="emotion-41 emotion-19"
data-e2e="story-promo"
>
<div
class="emotion-43 emotion-31"
dir="ltr"
>
<div
class="emotion-32 emotion-33"
>
<div
class="emotion-34"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 2"
class="emotion-35"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image2.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image2.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image2.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image2.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image2.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image2.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-49 emotion-37"
/>
</div>
</div>
<div
class="emotion-51 emotion-21"
dir="ltr"
>
<h3
class="emotion-53 emotion-23"
>
<a
aria-labelledby="promo-1"
class="focusIndicatorDisplayInlineBlock emotion-24 emotion-25"
href="https://www.bbc.co.uk"
>
<span
id="promo-1"
>
Top Story 2 headline
</span>
</a>
</h3>
<p
class="emotion-26 emotion-27"
>
Summary text 2
</p>
<time
class="emotion-28 emotion-29"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
</ul>
</section>
</div>
`;
exports[`IndexPageSection Container snapshots should render with only one item 1`] = `
.emotion-0 {
margin: 0 auto;
width: 100%;
}
@media (min-width: 63rem) {
.emotion-0 {
max-width: 63rem;
}
}
.emotion-2 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin-bottom: 1.5rem;
}
}
.emotion-4 {
margin: 0;
padding: 0;
}
.emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-8 {
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-8 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-10 {
font-size: 1.125rem;
line-height: 1.375rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #FDFDFD;
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-10 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
padding-right: 1rem;
}
}
@media (min-width: 37.5rem) {
.emotion-12 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-12 {
margin-top: 2rem;
}
}
.emotion-14 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-14 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-14 {
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-14 {
grid-template-columns: repeat(12, 1fr);
}
}
}
.emotion-16 {
display: inline-block;
vertical-align: top;
position: relative;
margin-bottom: 0.5rem;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-16 {
width: calc(50% - 0.5rem);
margin-bottom: 0;
}
}
@media (min-width: 63rem) {
.emotion-16 {
width: calc(50% - 0.5rem);
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-16 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 79.9375rem) {
.emotion-16 {
grid-column: 1/span 3;
}
}
}
.emotion-18 {
position: relative;
}
.emotion-20 {
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-20 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-20 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-21 {
width: 100%;
object-fit: cover;
height: auto;
}
.emotion-22 {
position: absolute;
bottom: 0;
}
.emotion-22>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
.emotion-24 {
display: inline-block;
vertical-align: top;
}
@media (min-width: 37.5rem) {
.emotion-24 {
width: 50%;
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-24 {
width: 50%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-24 {
display: block;
width: initial;
padding: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-24 {
grid-column: 4/span 3;
}
}
@media (min-width: 80rem) {
.emotion-24 {
grid-column: 7/span 6;
}
}
}
.emotion-26 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-26 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
@media (min-width: 37.5rem) {
.emotion-26 {
font-size: 1.75rem;
line-height: 2rem;
}
}
.emotion-28 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
overflow-wrap: anywhere;
}
.emotion-28:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-28:hover,
.emotion-28:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-28:visited {
color: #6E6E73;
}
.emotion-30 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-30 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-30 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-30 {
display: none;
visibility: hidden;
}
}
.emotion-32 {
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;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-32 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-32 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
<div>
<section
aria-labelledby="Top-Stories"
class="emotion-0 emotion-1"
role="region"
>
<div
class="emotion-2 emotion-3"
>
<h2
class="emotion-4 emotion-5"
>
<span
class="emotion-6 emotion-7"
>
<span
class="emotion-8 emotion-9"
>
<span
class="emotion-10 emotion-11"
dir="ltr"
id="Top-Stories"
>
Top Stories
</span>
</span>
</span>
</h2>
</div>
<div
class="emotion-12 emotion-13"
>
<div
class="emotion-14 emotion-15"
data-e2e="story-promo"
>
<div
class="emotion-16 emotion-17"
dir="ltr"
>
<div
class="emotion-18 emotion-19"
>
<div
class="emotion-20"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 1"
class="emotion-21"
height="1152"
sizes="(min-width: 1100px) 496px, (min-width: 600px) 45.83vw, 94.29vw"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-22 emotion-23"
/>
</div>
</div>
<div
class="emotion-24 emotion-25"
dir="ltr"
>
<h3
class="emotion-26 emotion-27"
>
<a
aria-labelledby="promo-1"
class="focusIndicatorDisplayInlineBlock emotion-28 emotion-29"
href="https://www.bbc.co.uk"
>
<span
id="promo-1"
>
Top Story 1 headline
</span>
</a>
</h3>
<p
class="emotion-30 emotion-31"
>
Summary text 1
</p>
<time
class="emotion-32 emotion-33"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</div>
</section>
</div>
`;
exports[`IndexPageSection Container snapshots should render without a bar 1`] = `
.emotion-0 {
margin: 0 auto;
width: 100%;
}
@media (min-width: 63rem) {
.emotion-0 {
max-width: 63rem;
}
}
.emotion-2 {
position: relative;
z-index: 0;
color: #141414;
margin-top: 2rem;
}
@media (min-width: 37.5rem) {
.emotion-2 {
margin-top: 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-2 {
margin-bottom: 1.5rem;
}
}
.emotion-4 {
margin: 0;
padding: 0;
}
.emotion-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.emotion-8 {
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-8 {
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
}
.emotion-10 {
font-size: 1.125rem;
line-height: 1.375rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
background-color: #FDFDFD;
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-10 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
margin: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
padding-right: 1rem;
}
}
.emotion-13 {
list-style-type: none;
margin: 0;
padding: 0;
}
@supports (display: grid) {
.emotion-13 {
display: grid;
position: initial;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 0.5rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-13 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-13 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-13 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
grid-column-gap: 1rem;
}
}
}
.emotion-16 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-16 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-16:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-16 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-16 {
padding: 0 0 1.5rem;
}
}
.emotion-16:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-16:first-child {
padding-top: 1rem;
}
}
.emotion-16:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-16 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-16 {
width: calc(8/8*(100% - 8 * 1rem) + 7 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-16 {
width: calc(8/8*(100% - 8 * 1rem) + 7 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-16 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-16 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-16 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
}
}
@media (min-width: 80rem) {
.emotion-16 {
grid-template-columns: repeat(8, 1fr);
grid-column-end: span 8;
}
}
}
.emotion-18 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-18 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-18 {
grid-column-gap: 1rem;
}
}
@media (min-width: 80rem) {
.emotion-18 {
grid-template-columns: repeat(12, 1fr);
}
}
}
.emotion-20 {
display: inline-block;
vertical-align: top;
position: relative;
margin-bottom: 0.5rem;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-20 {
width: calc(50% - 0.5rem);
margin-bottom: 0;
}
}
@media (min-width: 63rem) {
.emotion-20 {
width: calc(50% - 0.5rem);
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-20 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 79.9375rem) {
.emotion-20 {
grid-column: 1/span 3;
}
}
}
.emotion-22 {
position: relative;
}
.emotion-24 {
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-24 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-24 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-25 {
width: 100%;
object-fit: cover;
height: auto;
}
.emotion-26 {
position: absolute;
bottom: 0;
}
.emotion-26>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
.emotion-28 {
display: inline-block;
vertical-align: top;
}
@media (min-width: 37.5rem) {
.emotion-28 {
width: 50%;
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-28 {
width: 50%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-28 {
display: block;
width: initial;
padding: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-28 {
grid-column: 4/span 3;
}
}
@media (min-width: 80rem) {
.emotion-28 {
grid-column: 7/span 6;
}
}
}
.emotion-30 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
line-height: 1.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-30 {
font-size: 1.375rem;
line-height: 1.625rem;
}
}
@media (min-width: 37.5rem) {
.emotion-30 {
font-size: 1.75rem;
line-height: 2rem;
}
}
.emotion-32 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
overflow-wrap: anywhere;
}
.emotion-32:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-32:hover,
.emotion-32:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-32:visited {
color: #6E6E73;
}
.emotion-34 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-34 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-34 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-34 {
display: none;
visibility: hidden;
}
}
.emotion-36 {
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;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-36 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-36 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
.emotion-39 {
padding: 0.5rem 0 1rem;
}
@media (max-width: 62.9375rem) {
.emotion-39 {
border-bottom: 0.0625rem solid #F2F2F2;
}
}
.emotion-39:last-child {
border: none;
}
@media (min-width: 37.5rem) {
.emotion-39 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-39 {
padding: 0 0 1.5rem;
}
}
.emotion-39:first-child {
padding-top: 0;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-39:first-child {
padding-top: 1rem;
}
}
.emotion-39:last-child {
padding-bottom: 0;
}
@media (max-width: 14.9375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
margin: 0 0.25rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-39 {
width: calc(6/6*(100% - 6 * 1rem) + 5 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-39 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@media (min-width: 80rem) {
.emotion-39 {
width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
margin: 0 0.5rem;
display: inline-block;
vertical-align: top;
}
}
@supports (display: grid) {
.emotion-39 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-39 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-39 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
@media (min-width: 80rem) {
.emotion-39 {
grid-template-columns: repeat(2, 1fr);
grid-column-end: span 2;
}
}
}
.emotion-41 {
position: relative;
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-41 {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-41 {
grid-column-gap: 1rem;
}
}
@media (min-width: 63rem) {
.emotion-41 {
display: block;
}
}
}
.emotion-43 {
display: inline-block;
vertical-align: top;
position: relative;
width: 33.33%;
}
@media (min-width: 63rem) {
.emotion-43 {
display: block;
width: 100%;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-43 {
width: initial;
grid-column: 1/span 2;
}
}
@media (min-width: 25rem) {
.emotion-49 {
position: absolute;
bottom: 0;
}
}
.emotion-49>* {
height: 2rem;
padding: 0.5rem 0.25rem;
}
@media (max-width: 24.9375rem) {
.emotion-49>* {
height: 1.25rem;
padding: 0.25rem 0.25rem 0;
}
}
.emotion-51 {
display: inline-block;
vertical-align: top;
width: 66.67%;
padding: 0 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-51 {
padding: 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-51 {
display: block;
width: 100%;
padding: 0.5rem 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-51 {
display: block;
width: initial;
padding: initial;
grid-column: 3/span 4;
}
@media (min-width: 63rem) {
.emotion-51 {
padding-top: 0.5rem;
}
}
}
.emotion-53 {
color: #222222;
margin: 0;
padding-bottom: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-53 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-53 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-57 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #3F3F42;
margin: 0;
padding-bottom: 0.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-57 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-57 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (max-width: 37.4375rem) {
.emotion-57 {
display: none;
visibility: hidden;
}
}
@media (min-width: 63rem) {
.emotion-57 {
display: none;
visibility: hidden;
}
}
<div>
<section
aria-labelledby="Top-Stories"
class="emotion-0 emotion-1"
role="region"
>
<div
class="emotion-2 emotion-3"
>
<h2
class="emotion-4 emotion-5"
>
<span
class="emotion-6 emotion-7"
>
<span
class="emotion-8 emotion-9"
>
<span
class="emotion-10 emotion-11"
dir="ltr"
id="Top-Stories"
>
Top Stories
</span>
</span>
</span>
</h2>
</div>
<ul
class="emotion-12 emotion-13 emotion-14"
dir="ltr"
role="list"
>
<li
class="emotion-12 emotion-16 emotion-17"
dir="ltr"
>
<div
class="emotion-18 emotion-19"
data-e2e="story-promo"
>
<div
class="emotion-20 emotion-21"
dir="ltr"
>
<div
class="emotion-22 emotion-23"
>
<div
class="emotion-24"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 1"
class="emotion-25"
height="1152"
loading="lazy"
sizes="(min-width: 1100px) 496px, (min-width: 600px) 45.83vw, 94.29vw"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image1.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image1.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image1.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image1.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image1.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image1.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image1.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-26 emotion-27"
/>
</div>
</div>
<div
class="emotion-28 emotion-29"
dir="ltr"
>
<h3
class="emotion-30 emotion-31"
>
<a
aria-labelledby="promo-1"
class="focusIndicatorDisplayInlineBlock emotion-32 emotion-33"
href="https://www.bbc.co.uk"
>
<span
id="promo-1"
>
Top Story 1 headline
</span>
</a>
</h3>
<p
class="emotion-34 emotion-35"
>
Summary text 1
</p>
<time
class="emotion-36 emotion-37"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-12 emotion-39 emotion-17"
dir="ltr"
>
<div
class="emotion-41 emotion-19"
data-e2e="story-promo"
>
<div
class="emotion-43 emotion-21"
dir="ltr"
>
<div
class="emotion-22 emotion-23"
>
<div
class="emotion-24"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 2"
class="emotion-25"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image2.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image2.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image2.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image2.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image2.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image2.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image2.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-49 emotion-27"
/>
</div>
</div>
<div
class="emotion-51 emotion-29"
dir="ltr"
>
<h3
class="emotion-53 emotion-31"
>
<a
aria-labelledby="promo-top-stories-1"
class="focusIndicatorDisplayInlineBlock emotion-32 emotion-33"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-1"
>
Top Story 2 headline
</span>
</a>
</h3>
<p
class="emotion-57 emotion-35"
>
Summary text 2
</p>
<time
class="emotion-36 emotion-37"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-12 emotion-39 emotion-17"
dir="ltr"
>
<div
class="emotion-41 emotion-19"
data-e2e="story-promo"
>
<div
class="emotion-43 emotion-21"
dir="ltr"
>
<div
class="emotion-22 emotion-23"
>
<div
class="emotion-24"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 3"
class="emotion-25"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image3.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image3.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image3.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image3.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image3.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image3.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image3.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image3.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-49 emotion-27"
/>
</div>
</div>
<div
class="emotion-51 emotion-29"
dir="ltr"
>
<h3
class="emotion-53 emotion-31"
>
<a
aria-labelledby="promo-top-stories-2"
class="focusIndicatorDisplayInlineBlock emotion-32 emotion-33"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-2"
>
Top Story 3 headline
</span>
</a>
</h3>
<p
class="emotion-57 emotion-35"
>
Summary text 3
</p>
<time
class="emotion-36 emotion-37"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-12 emotion-39 emotion-17"
dir="ltr"
>
<div
class="emotion-41 emotion-19"
data-e2e="story-promo"
>
<div
class="emotion-43 emotion-21"
dir="ltr"
>
<div
class="emotion-22 emotion-23"
>
<div
class="emotion-24"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 4"
class="emotion-25"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image4.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image4.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image4.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image4.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image4.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image4.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image4.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image4.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-49 emotion-27"
/>
</div>
</div>
<div
class="emotion-51 emotion-29"
dir="ltr"
>
<h3
class="emotion-53 emotion-31"
>
<a
aria-labelledby="promo-top-stories-3"
class="focusIndicatorDisplayInlineBlock emotion-32 emotion-33"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-3"
>
Top Story 4 headline
</span>
</a>
</h3>
<p
class="emotion-57 emotion-35"
>
Summary text 4
</p>
<time
class="emotion-36 emotion-37"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
<li
class="emotion-12 emotion-39 emotion-17"
dir="ltr"
>
<div
class="emotion-41 emotion-19"
data-e2e="story-promo"
>
<div
class="emotion-43 emotion-21"
dir="ltr"
>
<div
class="emotion-22 emotion-23"
>
<div
class="emotion-24"
style="padding-bottom: 56.25%; overflow: hidden;"
>
<img
alt="Image Alt text 5"
class="emotion-25"
height="1152"
loading="lazy"
sizes="(min-width: 1020px) 232px, calc(31.86vw - 7px)"
src="https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image5.jpg.webp"
srcset="https://ichef.bbci.co.uk/ace/ws/70/cpsprodpb/0A06/production/image5.jpg.webp 70w, https://ichef.bbci.co.uk/ace/ws/95/cpsprodpb/0A06/production/image5.jpg.webp 95w, https://ichef.bbci.co.uk/ace/ws/144/cpsprodpb/0A06/production/image5.jpg.webp 144w, https://ichef.bbci.co.uk/ace/ws/183/cpsprodpb/0A06/production/image5.jpg.webp 183w, https://ichef.bbci.co.uk/ace/ws/240/cpsprodpb/0A06/production/image5.jpg.webp 240w, https://ichef.bbci.co.uk/ace/ws/320/cpsprodpb/0A06/production/image5.jpg.webp 320w, https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/0A06/production/image5.jpg.webp 660w"
width="2048"
/>
</div>
<div
class="emotion-49 emotion-27"
/>
</div>
</div>
<div
class="emotion-51 emotion-29"
dir="ltr"
>
<h3
class="emotion-53 emotion-31"
>
<a
aria-labelledby="promo-top-stories-4"
class="focusIndicatorDisplayInlineBlock emotion-32 emotion-33"
href="https://www.bbc.co.uk"
>
<span
id="promo-top-stories-4"
>
Top Story 5 headline
</span>
</a>
</h3>
<p
class="emotion-57 emotion-35"
>
Summary text 5
</p>
<time
class="emotion-36 emotion-37"
datetime="1970-01-19"
>
19 January 1970
</time>
</div>
</div>
</li>
</ul>
</section>
</div>
`;