bbc/simorgh

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Most Read Page Main should match snapshot for most read page 1`] = `
.emotion-0 {
  margin: 0 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

@media (min-width: 25rem) {
  .emotion-0 {
    margin: 0 1rem;
  }
}

@media (min-width: 25rem) {
  .emotion-0 {
    padding-top: 1rem;
  }
}

@media (max-width: 37.4375rem) {
  .emotion-0 {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-0 {
    padding-top: 0;
  }
}

@media (min-width: 63rem) {
  .emotion-0 {
    padding-bottom: 2.5rem;
  }
}

.emotion-2 {
  font-size: 1.125rem;
  line-height: 1.375rem;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #6E6E73;
  margin: 0;
  padding-bottom: 1.5rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-2 {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-2 {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-2 {
    padding: 1.5rem 0 0.5rem;
  }
}

@media (min-width: 63rem) {
  .emotion-2 {
    padding: 1.5rem 0 0;
  }
}

@media (min-width: 80rem) {
  .emotion-2 {
    width: 100%;
    margin: 0 auto;
    max-width: 80rem;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-4 {
    margin-top: 1.5rem;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-4 {
    margin-top: 2rem;
  }
}

@media (min-width: 80rem) {
  .emotion-4 {
    margin-top: 2rem;
  }
}

.emotion-7 {
  width: 100%;
}

@supports (display: grid) {
  .emotion-7 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-7 {
      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-7 {
      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-7 {
      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-7 {
      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-7 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-7 {
      grid-template-columns: repeat(20, 1fr);
      grid-column-end: span 20;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-7 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@media (min-width: 80rem) {
  .emotion-7 {
    margin: 0 auto;
    max-width: 80rem;
  }
}

@media (max-width: 14.9375rem) {
  .emotion-9 {
    margin-left: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-9 {
    margin-left: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-9 {
    margin-left: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-9 {
    margin-left: 0%;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-9 {
    margin-left: 0%;
  }
}

@media (min-width: 80rem) {
  .emotion-9 {
    margin-left: 18.181818181818183%;
  }
}

@supports (display: grid) {
  .emotion-9 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-9 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 1;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-9 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 1;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-9 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 1;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-9 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-9 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-start: 1;
    }
  }

  @media (min-width: 80rem) {
    .emotion-9 {
      grid-template-columns: repeat(11, 1fr);
      grid-column-end: span 11;
      grid-column-start: 3;
    }
  }
}

.emotion-11 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
}

@supports (display: grid) {
  .emotion-11 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-11 {
      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-11 {
      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-11 {
      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-11 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-11 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-11 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
      grid-column-gap: 1rem;
    }
  }
}

.emotion-13 {
  position: relative;
  padding-bottom: 1.5rem;
}

@supports (display: grid) {
  .emotion-13 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-13 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-13 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-13 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-13 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-13 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
    }
  }

  @media (min-width: 80rem) {
    .emotion-13 {
      grid-template-columns: repeat(1, 1fr);
      grid-column-end: span 1;
    }
  }
}

.emotion-15 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

@media (max-width: 14.9375rem) {
  .emotion-16 {
    min-width: 1.5rem;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-16 {
    min-width: 1.5rem;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-16 {
    min-width: 1.5rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-16 {
    min-width: 2rem;
  }
}

.emotion-17 {
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  position: relative;
  color: #B80000;
  margin: 0;
  padding: 0;
  font-size: 2rem;
  line-height: 2.25rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-17 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-17 {
    font-size: 3.5rem;
    line-height: 3.75rem;
  }
}

.emotion-18 {
  padding-top: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@supports (grid-template-columns: fit-content(200px)) {
  .emotion-18 {
    padding-right: 0;
  }
}

.emotion-19 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 700;
  position: static;
  color: #222222;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-19 {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-19 {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.emotion-19:hover,
.emotion-19:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-19:before {
  bottom: 0;
  content: '';
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}

@media (min-width: 25rem) {
  .emotion-19 {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }

  @media (min-width: 20rem) and (max-width: 37.4375rem) {
    .emotion-19 {
      font-size: 1.125rem;
      line-height: 1.375rem;
    }
  }

  @media (min-width: 37.5rem) {
    .emotion-19 {
      font-size: 1.25rem;
      line-height: 1.5rem;
    }
  }
}

.emotion-20 {
  padding-top: 0.5rem;
}

.emotion-21 {
  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-21 {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-21 {
    font-size: 0.8125rem;
    line-height: 1rem;
  }
}

<div>
  <noscript />
  <div>
    chartbeat
  </div>
  <main
    data-e2e="most-read"
    role="main"
  >
    <div
      class="emotion-0 emotion-1"
    >
      <h1
        class="emotion-2 emotion-3"
        dir="ltr"
        id="content"
        tabindex="-1"
      >
        Di one wey oda users dey read well well
      </h1>
      <div
        class="emotion-4 emotion-5"
      >
        <div
          class="emotion-6 emotion-7 emotion-8"
          dir="ltr"
        >
          <div
            class="emotion-9 emotion-8"
            dir="ltr"
          >
            <ol
              class="emotion-11 emotion-8"
              dir="ltr"
              role="list"
            >
              <li
                class="emotion-13 emotion-8"
                dir="ltr"
                role="listitem"
              >
                <div
                  class="emotion-15"
                >
                  <div
                    class="emotion-16"
                    dir="ltr"
                  >
                    <span
                      class="emotion-17"
                    >
                      1
                    </span>
                  </div>
                  <div
                    class="emotion-18"
                    dir="ltr"
                  >
                    <a
                      class="focusIndicatorDisplayTableCell emotion-19"
                      href="https://www.bbc.com/pidgin/articles/cz5kkgv41v0o"
                    >
                      Teams wey qualify for Afcon 2023 and how things stand for each group
                    </a>
                    <div
                      class="emotion-20"
                    >
                      <time
                        class="emotion-21 emotion-22"
                        datetime="2023-06-19"
                      >
                        De one we dem update for: 19th June 2023
                      </time>
                    </div>
                  </div>
                </div>
              </li>
              <li
                class="emotion-13 emotion-8"
                dir="ltr"
                role="listitem"
              >
                <div
                  class="emotion-15"
                >
                  <div
                    class="emotion-16"
                    dir="ltr"
                  >
                    <span
                      class="emotion-17"
                    >
                      2
                    </span>
                  </div>
                  <div
                    class="emotion-18"
                    dir="ltr"
                  >
                    <a
                      class="focusIndicatorDisplayTableCell emotion-19"
                      href="https://www.bbc.com/pidgin/articles/czd44wvly0qo"
                    >
                      'We dey hear gospel songs den screaming' - Woman tok of Uganda school attack 
                    </a>
                    <div
                      class="emotion-20"
                    >
                      <time
                        class="emotion-21 emotion-22"
                        datetime="2023-06-19"
                      >
                        De one we dem update for: 19th June 2023
                      </time>
                    </div>
                  </div>
                </div>
              </li>
              <li
                class="emotion-13 emotion-8"
                dir="ltr"
                role="listitem"
              >
                <div
                  class="emotion-15"
                >
                  <div
                    class="emotion-16"
                    dir="ltr"
                  >
                    <span
                      class="emotion-17"
                    >
                      3
                    </span>
                  </div>
                  <div
                    class="emotion-18"
                    dir="ltr"
                  >
                    <a
                      class="focusIndicatorDisplayTableCell emotion-19"
                      href="https://www.bbc.com/pidgin/articles/cgr6g81j2g8o"
                    >
                      Super Eagles qualify for Nations Cup afta beating Sierra Leone for Monrovia
                    </a>
                    <div
                      class="emotion-20"
                    >
                      <time
                        class="emotion-21 emotion-22"
                        datetime="2023-06-18"
                      >
                        De one we dem update for: 18th June 2023
                      </time>
                    </div>
                  </div>
                </div>
              </li>
              <li
                class="emotion-13 emotion-8"
                dir="ltr"
                role="listitem"
              >
                <div
                  class="emotion-15"
                >
                  <div
                    class="emotion-16"
                    dir="ltr"
                  >
                    <span
                      class="emotion-17"
                    >
                      4
                    </span>
                  </div>
                  <div
                    class="emotion-18"
                    dir="ltr"
                  >
                    <a
                      class="focusIndicatorDisplayTableCell emotion-19"
                      href="https://www.bbc.com/pidgin/articles/cx047w4gxqzo"
                    >
                      Forbes top ten list of highest paid athletes for 2023 and wetin dem earn
                    </a>
                    <div
                      class="emotion-20"
                    >
                      <time
                        class="emotion-21 emotion-22"
                        datetime="2023-05-03"
                      >
                        De one we dem update for: 3rd May 2023
                      </time>
                    </div>
                  </div>
                </div>
              </li>
              <li
                class="emotion-13 emotion-8"
                dir="ltr"
                role="listitem"
              >
                <div
                  class="emotion-15"
                >
                  <div
                    class="emotion-16"
                    dir="ltr"
                  >
                    <span
                      class="emotion-17"
                    >
                      5
                    </span>
                  </div>
                  <div
                    class="emotion-18"
                    dir="ltr"
                  >
                    <a
                      class="focusIndicatorDisplayTableCell emotion-19"
                      href="/pidgin/65817572"
                    >
                      Tins to sabi about 2023 Sierra Leone general election
                    </a>
                    <div
                      class="emotion-20"
                    >
                      <time
                        class="emotion-21 emotion-22"
                        datetime="2023-06-18"
                      >
                        De one we dem update for: 18th June 2023
                      </time>
                    </div>
                  </div>
                </div>
              </li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
`;