Sign upLogin

bbc/simorgh

View on GitHub
Star
src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Article Page should render a ltr article (pidgin) with most read correctly 1`] = `
.emotion-0 {
  background-color: #F6F6F6;
}

.emotion-1 {
  max-width: 63rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 63rem) {
  .emotion-1 {
    padding: 0 1rem;
    -webkit-column-gap: 1rem;
    column-gap: 1rem;
  }
}

.emotion-2 {
  grid-column: 1/span 12;
  padding-bottom: 2rem;
}

@media (min-width: 63rem) {
  .emotion-2 {
    grid-column: 1/span 8;
  }
}

.emotion-3 {
  padding-bottom: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.emotion-6 {
  font-size: 1.75rem;
  line-height: 2rem;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #141414;
  display: block;
  margin: 0;
  padding: 2rem 0;
  overflow-wrap: anywhere;
}

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

@media (min-width: 37.5rem) {
  .emotion-6 {
    font-size: 2.75rem;
    line-height: 3rem;
  }
}

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

.emotion-6:focus {
  outline: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.emotion-10 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
}

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

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

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

@media (max-width: 24.9375rem) {
  .emotion-12 {
    margin: 0 0.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 25rem) {
  @media (max-width: 62.9375rem) {
    .emotion-12 {
      margin: 0 1rem;
      padding-bottom: 2rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-12 {
    margin: 0 1rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 80rem) {
  .emotion-12 {
    margin: 0 auto;
    padding: 0 1rem 1.5rem;
    max-width: 80rem;
  }
}

.emotion-13 {
  position: relative;
  z-index: 0;
  color: #141414;
  margin-top: 2rem;
}

@media (min-width: 37.5rem) {
  .emotion-13 {
    margin-top: 1.5rem;
  }
}

@media (min-width: 63rem) {
  .emotion-13 {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-13 {
    margin-bottom: 1rem;
  }
}

.emotion-15 {
  margin: 0;
  padding: 0;
}

.emotion-17 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.emotion-19 {
  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-19 {
    -webkit-align-items: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
}

.emotion-21 {
  font-size: 1.125rem;
  line-height: 1.375rem;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  background-color: #F6F6F6;
  margin: 1rem 0;
  padding-right: 0.5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

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

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

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

@media (min-width: 37.5rem) {
  .emotion-21 {
    padding-right: 1rem;
  }
}

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

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

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

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

@media (min-width: 80rem) {
  .emotion-23 {
    grid-auto-flow: row;
  }
}

@media (min-width: 37.5rem) {
  .emotion-23 {
    grid-template-rows: repeat(3, auto);
  }
}

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

@media (max-width: 14.9375rem) {
  .emotion-25 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-25 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-25 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-25 {
    width: calc(50%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-25 {
    width: calc(50%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 80rem) {
  .emotion-25 {
    width: calc(20%);
    display: inline-block;
    vertical-align: top;
  }
}

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

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

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

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

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

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

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

.emotion-27 {
  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-28 {
    min-width: 1.5rem;
  }
}

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

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

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

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

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-28 {
      min-width: 2rem;
    }
  }
}

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

.emotion-29 {
  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-29 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

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

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

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

.emotion-31 {
  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-31 {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

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

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

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

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

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

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

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

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

<div>
  <div
    class="emotion-0"
  >
    <noscript />
    <div>
      chartbeat
    </div>
    <div
      class="emotion-1"
    >
      <div
        class="emotion-2"
      >
        <main
          class="emotion-3"
          role="main"
        >
          <div
            class="emotion-4 emotion-5"
            dir="ltr"
          >
            <h1
              class="emotion-6 emotion-7"
              id="content"
              tabindex="-1"
            >
              Article Headline in Pidgin
            </h1>
          </div>
          <div
            class="emotion-8 emotion-5"
            dir="ltr"
          >
            <p
              class="emotion-10 emotion-11"
              dir="ltr"
            >
              A paragraph in Pidgin.
            </p>
          </div>
        </main>
      </div>
    </div>
    <section
      aria-labelledby="Most-Read"
      class="emotion-12"
      data-e2e="most-read"
      data-testid="most-read"
      role="region"
    >
      <div
        class="emotion-13 emotion-14"
      >
        <h2
          class="emotion-15 emotion-16"
        >
          <span
            class="emotion-17 emotion-18"
          >
            <span
              class="emotion-19 emotion-20"
            >
              <span
                class="emotion-21 emotion-22"
                dir="ltr"
                id="Most-Read"
              >
                Di one wey oda users dey read well well
              </span>
            </span>
          </span>
        </h2>
      </div>
      <ol
        class="emotion-23 emotion-5"
        dir="ltr"
        role="list"
      >
        <li
          class="emotion-25 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-28"
              dir="ltr"
            >
              <span
                class="emotion-29"
              >
                1
              </span>
            </div>
            <div
              class="emotion-30"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                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-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  De one we dem update for: 19th June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-28"
              dir="ltr"
            >
              <span
                class="emotion-29"
              >
                2
              </span>
            </div>
            <div
              class="emotion-30"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                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-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  De one we dem update for: 19th June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-28"
              dir="ltr"
            >
              <span
                class="emotion-29"
              >
                3
              </span>
            </div>
            <div
              class="emotion-30"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/pidgin/articles/cgr6g81j2g8o"
              >
                Super Eagles qualify for Nations Cup afta beating Sierra Leone for Monrovia
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-18"
                >
                  De one we dem update for: 18th June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-28"
              dir="ltr"
            >
              <span
                class="emotion-29"
              >
                4
              </span>
            </div>
            <div
              class="emotion-30"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                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-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-05-03"
                >
                  De one we dem update for: 3rd May 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-28"
              dir="ltr"
            >
              <span
                class="emotion-29"
              >
                5
              </span>
            </div>
            <div
              class="emotion-30"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="/pidgin/65817572"
              >
                Tins to sabi about 2023 Sierra Leone general election
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-18"
                >
                  De one we dem update for: 18th June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
      </ol>
    </section>
  </div>
</div>
`;

exports[`Article Page should render a news article correctly 1`] = `
.emotion-0 {
  background-color: #F6F6F6;
}

.emotion-1 {
  max-width: 63rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 63rem) {
  .emotion-1 {
    padding: 0 1rem;
    -webkit-column-gap: 1rem;
    column-gap: 1rem;
  }
}

.emotion-2 {
  grid-column: 1/span 12;
  padding-bottom: 2rem;
}

@media (min-width: 63rem) {
  .emotion-2 {
    grid-column: 1/span 8;
  }
}

.emotion-3 {
  padding-bottom: 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.emotion-6 {
  font-size: 1.75rem;
  line-height: 2rem;
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #141414;
  display: block;
  margin: 0;
  padding: 2rem 0;
  overflow-wrap: anywhere;
}

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

@media (min-width: 37.5rem) {
  .emotion-6 {
    font-size: 2.75rem;
    line-height: 3rem;
  }
}

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

.emotion-6:focus {
  outline: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.emotion-10 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
}

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

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

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

.emotion-12 {
  max-width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 25rem) {
  .emotion-12 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 63rem) {
  .emotion-12 {
    padding-left: 0;
    padding-right: 0;
  }
}

.emotion-13 {
  margin: 0;
  padding-bottom: 1.5rem;
  width: 100%;
}

.emotion-14 {
  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-14 {
    -webkit-background-size: 77px 22px;
    background-size: 77px 22px;
  }
}

@media (min-width: 63rem) {
  .emotion-14 {
    -webkit-background-size: 93px 27px;
    background-size: 93px 27px;
  }
}

.emotion-15 {
  width: 100%;
  object-fit: cover;
  height: auto;
}

@media (max-width: 24.9375rem) {
  .emotion-16 {
    margin: 0 0.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 25rem) {
  @media (max-width: 62.9375rem) {
    .emotion-16 {
      margin: 0 1rem;
      padding-bottom: 2rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-16 {
    margin: 0 1rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 80rem) {
  .emotion-16 {
    margin: 0 auto;
    padding: 0 1rem 1.5rem;
    max-width: 80rem;
  }
}

.emotion-17 {
  position: relative;
  z-index: 0;
  color: #141414;
  margin-top: 2rem;
}

@media (min-width: 37.5rem) {
  .emotion-17 {
    margin-top: 1.5rem;
  }
}

@media (min-width: 63rem) {
  .emotion-17 {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-17 {
    margin-bottom: 1rem;
  }
}

.emotion-19 {
  margin: 0;
  padding: 0;
}

.emotion-21 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.emotion-23 {
  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-23 {
    -webkit-align-items: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
}

.emotion-25 {
  font-size: 1.125rem;
  line-height: 1.375rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  background-color: #F6F6F6;
  margin: 1rem 0;
  padding-right: 0.5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

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

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

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

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

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

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

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

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

@media (min-width: 80rem) {
  .emotion-27 {
    grid-auto-flow: row;
  }
}

@media (min-width: 37.5rem) {
  .emotion-27 {
    grid-template-rows: repeat(5, auto);
  }
}

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

@media (max-width: 14.9375rem) {
  .emotion-29 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-29 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-29 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-29 {
    width: calc(50%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-29 {
    width: calc(50%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 80rem) {
  .emotion-29 {
    width: calc(20%);
    display: inline-block;
    vertical-align: top;
  }
}

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

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

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

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

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

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

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

.emotion-31 {
  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-32 {
    min-width: 2.5rem;
  }
}

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

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

@media (min-width: 37.5rem) {
  .emotion-32 {
    min-width: 4rem;
  }
}

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

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-32 {
      min-width: 2rem;
    }
  }
}

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

.emotion-33 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 300;
  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-33 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

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

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

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

.emotion-35 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 500;
  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-35 {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 37.5rem) {
  .emotion-42 {
    min-width: 4rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-42 {
    min-width: 4rem;
  }
}

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-42 {
      min-width: 2rem;
    }
  }
}

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

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

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

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

@media (min-width: 37.5rem) {
  .emotion-72 {
    min-width: 4rem;
  }
}

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

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-72 {
      min-width: 2rem;
    }
  }
}

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

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

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

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

@media (min-width: 37.5rem) {
  .emotion-82 {
    min-width: 4rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-82 {
    min-width: 4rem;
  }
}

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-82 {
      min-width: 4rem;
    }
  }
}

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

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

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

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

@media (min-width: 37.5rem) {
  .emotion-92 {
    min-width: 4rem;
  }
}

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

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-92 {
      min-width: 4rem;
    }
  }
}

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

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

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

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

@media (min-width: 37.5rem) {
  .emotion-122 {
    min-width: 4rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-122 {
    min-width: 4rem;
  }
}

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-122 {
      min-width: 4rem;
    }
  }
}

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

<div>
  <div
    class="emotion-0"
  >
    <noscript />
    <div>
      chartbeat
    </div>
    <div
      class="emotion-1"
    >
      <div
        class="emotion-2"
      >
        <main
          class="emotion-3"
          role="main"
        >
          <div
            class="emotion-4 emotion-5"
            dir="ltr"
          >
            <h1
              class="emotion-6 emotion-7"
              id="content"
              tabindex="-1"
            >
              Article Headline
            </h1>
          </div>
          <div
            class="emotion-8 emotion-5"
            dir="ltr"
          >
            <p
              class="emotion-10 emotion-11"
              dir="ltr"
            >
              A paragraph.
            </p>
          </div>
          <div
            class="emotion-12"
            data-testid="embed"
          >
            <div
              class="riddle2-wrapper"
              data-auto-scroll="true"
              data-bg="#fff"
              data-fg="#00205b"
              data-is-fixed-height-enabled="false"
              data-rid-id="SAVstNdh"
              style="margin:0 auto; max-width:100%; width:640px;"
            >
              <script
                src="https://www.riddle.com/embed/build-embedjs/embedV2.js"
              />
              <iframe
                allow="autoplay"
                referrerpolicy="strict-origin"
                src="https://www.riddle.com/embed/a/SAVstNdh?lazyImages=true&staticHeight=false"
              >
                &lt;section data-block="SingleChoice"&gt;&lt;h2&gt;How silly is Abby?&lt;/h2&gt;&lt;p&gt;&lt;p&gt;Babby&lt;/p&gt;&lt;/p&gt;&lt;ul&gt;&lt;li&gt;Extremely silly&lt;/li&gt;&lt;li&gt;Not silly at all&lt;/li&gt;&lt;li&gt;Not very silly&lt;/li&gt;&lt;li&gt;Very silly&lt;/li&gt;&lt;/ul&gt;&lt;/section&gt;&lt;section data-block="SingleChoice"&gt;&lt;h3&gt;What is Abby&#039;s silliness level?&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;High&lt;/li&gt;&lt;li&gt;Low&lt;/li&gt;&lt;li&gt;Medium&lt;/li&gt;&lt;li&gt;None&lt;/li&gt;&lt;/ul&gt;&lt;/section&gt;&lt;section data-block="SingleChoice"&gt;&lt;h3&gt;How often is Abby silly?&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;Never&lt;/li&gt;&lt;li&gt;Rarely&lt;/li&gt;&lt;li&gt;Always&lt;/li&gt;&lt;li&gt;Sometimes&lt;/li&gt;&lt;/ul&gt;&lt;/section&gt;&lt;section data-block="SingleChoice"&gt;&lt;h3&gt;What is Abby&#039;s silliness like?&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;Outrageous&lt;/li&gt;&lt;li&gt;Non-existent&lt;/li&gt;&lt;li&gt;Mild&lt;/li&gt;&lt;li&gt;Moderate&lt;/li&gt;&lt;/ul&gt;&lt;/section&gt;&lt;section data-block="SingleChoice"&gt;&lt;h3&gt;How would you describe Abby&#039;s silliness?&lt;/h3&gt;&lt;ul&gt;&lt;li&gt;Crazy&lt;/li&gt;&lt;li&gt;Calm&lt;/li&gt;&lt;li&gt;Boring&lt;/li&gt;&lt;li&gt;Sensible&lt;/li&gt;&lt;/ul&gt;&lt;/section&gt;
              </iframe>
            </div>
          </div>
          <figure
            class="emotion-13"
          >
            <div
              class="emotion-14"
              style="padding-bottom: 56.26%;"
            >
              <img
                alt="Shiroo buddeen waliin"
                class="emotion-15"
                height="535"
                loading="lazy"
                sizes="(min-width: 1008px) 760px, 100vw"
                src="https://ichef.test.bbci.co.uk/ace/ws/640/cpsprodpb/157c/live/d5c6e520-16dd-11ef-9b12-1ba8f95c4917.jpg.webp"
                srcset="https://ichef.test.bbci.co.uk/ace/ws/240/cpsprodpb/157c/live/d5c6e520-16dd-11ef-9b12-1ba8f95c4917.jpg.webp 240w, https://ichef.test.bbci.co.uk/ace/ws/320/cpsprodpb/157c/live/d5c6e520-16dd-11ef-9b12-1ba8f95c4917.jpg.webp 320w, https://ichef.test.bbci.co.uk/ace/ws/480/cpsprodpb/157c/live/d5c6e520-16dd-11ef-9b12-1ba8f95c4917.jpg.webp 480w, https://ichef.test.bbci.co.uk/ace/ws/624/cpsprodpb/157c/live/d5c6e520-16dd-11ef-9b12-1ba8f95c4917.jpg.webp 624w, https://ichef.test.bbci.co.uk/ace/ws/800/cpsprodpb/157c/live/d5c6e520-16dd-11ef-9b12-1ba8f95c4917.jpg.webp 800w"
                width="951"
              />
            </div>
          </figure>
        </main>
      </div>
    </div>
    <section
      aria-labelledby="Most-Read"
      class="emotion-16"
      data-e2e="most-read"
      data-testid="most-read"
      role="region"
    >
      <div
        class="emotion-17 emotion-18"
      >
        <h2
          class="emotion-19 emotion-20"
        >
          <span
            class="emotion-21 emotion-22"
          >
            <span
              class="emotion-23 emotion-24"
            >
              <span
                class="emotion-25 emotion-26"
                dir="ltr"
                id="Most-Read"
              >
                Most read
              </span>
            </span>
          </span>
        </h2>
      </div>
      <ol
        class="emotion-27 emotion-5"
        dir="ltr"
        role="list"
      >
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-32"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                1
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/world-us-canada-65981277"
              >
                Why the oxygen timeline on sub may not be so fixed
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-42"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                2
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/uk-wales-65986742"
              >
                MasterChef contestant jailed for child abuse images
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-32"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                3
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/business-65981876"
              >
                Musk and Zuckerberg agree to hold cage fight
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-42"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                4
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/entertainment-arts-65986136"
              >
                Cindy Beale returns to EastEnders after 25 years
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-72"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                5
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/health-65985838"
              >
                Mosquito-borne diseases risk increasing in Europe
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-82"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                6
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/uk-scotland-65987986"
              >
                Teenager guilty of murdering boy at train station
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-92"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                7
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/world-65983001"
              >
                At least 30 migrants feared dead off Canary Islands
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-82"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                8
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/business-65982981"
              >
                Bank boss warns interest rate hike hard for many
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-92"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                9
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/world-europe-65982817"
              >
                Ukraine strikes bridge to Crimea, says Russia
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-29 emotion-5"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-31"
          >
            <div
              class="emotion-122"
              dir="ltr"
            >
              <span
                class="emotion-33"
              >
                10
              </span>
            </div>
            <div
              class="emotion-34"
              dir="ltr"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-35"
                href="/news/world-us-canada-65923956"
              >
                The woman who wants to end abortion in America
              </a>
              <div
                class="emotion-36"
              >
                <time
                  class="emotion-37 emotion-38"
                  datetime="2023-06-22"
                >
                  Last updated: 22 June 2023
                </time>
              </div>
            </div>
          </div>
        </li>
      </ol>
    </section>
  </div>
</div>
`;

exports[`Article Page should render a news article with headline in the middle correctly 1`] = `
.emotion-0 {
  background-color: #F6F6F6;
}

.emotion-1 {
  max-width: 63rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 63rem) {
  .emotion-1 {
    padding: 0 1rem;
    -webkit-column-gap: 1rem;
    column-gap: 1rem;
  }
}

.emotion-2 {
  grid-column: 1/span 12;
  padding-bottom: 2rem;
}

@media (min-width: 63rem) {
  .emotion-2 {
    grid-column: 1/span 8;
  }
}

.emotion-3 {
  padding-bottom: 1.5rem;
}

.emotion-4 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.emotion-7 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
}

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

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

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

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

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

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

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

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

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

@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;
      padding: 0 0.5rem;
      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;
      padding: 0 0.5rem;
      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;
      padding: 0 1rem;
      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;
      padding: 0 1rem;
      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: 2;
    }
  }

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

.emotion-11 {
  font-size: 1.75rem;
  line-height: 2rem;
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #141414;
  display: block;
  margin: 0;
  padding: 2rem 0;
  overflow-wrap: anywhere;
}

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

@media (min-width: 37.5rem) {
  .emotion-11 {
    font-size: 2.75rem;
    line-height: 3rem;
  }
}

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

.emotion-11:focus {
  outline: none;
}

<div>
  <div
    class="emotion-0"
  >
    <noscript />
    <div>
      chartbeat
    </div>
    <div
      class="emotion-1"
    >
      <div
        class="emotion-2"
      >
        <main
          class="emotion-3"
          role="main"
        >
          <h1
            class="emotion-4"
            id="content"
            tabindex="-1"
          >
            SEO Headline
          </h1>
          <div
            class="emotion-5 emotion-6"
            dir="ltr"
          >
            <p
              class="emotion-7 emotion-8"
              dir="ltr"
            >
              Paragraph above headline
            </p>
          </div>
          <div
            class="emotion-9 emotion-6"
            dir="ltr"
          >
            <strong
              class="emotion-11 emotion-12"
            >
              Article Headline
            </strong>
          </div>
          <div
            class="emotion-5 emotion-6"
            dir="ltr"
          >
            <p
              class="emotion-7 emotion-8"
              dir="ltr"
            >
              Paragraph below headline
            </p>
          </div>
        </main>
      </div>
    </div>
  </div>
</div>
`;

exports[`Article Page should render a news article without headline correctly 1`] = `
.emotion-0 {
  background-color: #F6F6F6;
}

.emotion-1 {
  max-width: 63rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 63rem) {
  .emotion-1 {
    padding: 0 1rem;
    -webkit-column-gap: 1rem;
    column-gap: 1rem;
  }
}

.emotion-2 {
  grid-column: 1/span 12;
  padding-bottom: 2rem;
}

@media (min-width: 63rem) {
  .emotion-2 {
    grid-column: 1/span 8;
  }
}

.emotion-3 {
  padding-bottom: 1.5rem;
}

.emotion-4 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.emotion-7 {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
}

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

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

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

<div>
  <div
    class="emotion-0"
  >
    <noscript />
    <div>
      chartbeat
    </div>
    <div
      class="emotion-1"
    >
      <div
        class="emotion-2"
      >
        <main
          class="emotion-3"
          role="main"
        >
          <h1
            class="emotion-4"
            id="content"
            tabindex="-1"
          >
            Article Headline
          </h1>
          <div
            class="emotion-5 emotion-6"
            dir="ltr"
          >
            <p
              class="emotion-7 emotion-8"
              dir="ltr"
            >
              Paragraph 1
            </p>
          </div>
        </main>
      </div>
    </div>
  </div>
</div>
`;

exports[`Article Page should render a rtl article (persian) with most read correctly 1`] = `
.emotion-0 {
  background-color: #F6F6F6;
}

.emotion-1 {
  max-width: 63rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 63rem) {
  .emotion-1 {
    padding: 0 1rem;
    -webkit-column-gap: 1rem;
    column-gap: 1rem;
  }
}

.emotion-2 {
  grid-column: 1/span 12;
  padding-bottom: 2rem;
}

@media (min-width: 63rem) {
  .emotion-2 {
    grid-column: 1/span 8;
  }
}

.emotion-3 {
  padding-bottom: 1.5rem;
}

@media (max-width: 14.9375rem) {
  .emotion-4 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-4 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-4 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-4 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

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

@media (min-width: 80rem) {
  .emotion-4 {
    margin-right: 33.333333333333336%;
  }
}

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

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

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

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

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

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

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

.emotion-6 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #141414;
  display: block;
  margin: 0;
  padding: 2rem 0;
  overflow-wrap: anywhere;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-6 {
    font-size: 1.75rem;
    line-height: 2.375rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-6 {
    font-size: 2.5rem;
    line-height: 3.375rem;
  }
}

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

.emotion-6:focus {
  outline: none;
}

@media (max-width: 14.9375rem) {
  .emotion-8 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-8 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-8 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-8 {
    padding: 0 1rem;
    margin-right: 0%;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-8 {
    margin-right: 20%;
  }
}

@media (min-width: 80rem) {
  .emotion-8 {
    margin-right: 40%;
  }
}

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

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

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

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

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

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

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

.emotion-10 {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #141414;
  padding-bottom: 1.5rem;
  margin: 0;
}

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

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

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

@media (max-width: 24.9375rem) {
  .emotion-12 {
    margin: 0 0.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 25rem) {
  @media (max-width: 62.9375rem) {
    .emotion-12 {
      margin: 0 1rem;
      padding-bottom: 2rem;
    }
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-12 {
    margin: 0 1rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 80rem) {
  .emotion-12 {
    margin: 0 auto;
    padding: 0 1rem 1.5rem;
    max-width: 80rem;
  }
}

.emotion-13 {
  position: relative;
  z-index: 0;
  color: #141414;
  margin-top: 2rem;
}

@media (min-width: 37.5rem) {
  .emotion-13 {
    margin-top: 1.5rem;
  }
}

@media (min-width: 63rem) {
  .emotion-13 {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-13 {
    margin-bottom: 1rem;
  }
}

.emotion-15 {
  margin: 0;
  padding: 0;
}

.emotion-17 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.emotion-19 {
  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-19 {
    -webkit-align-items: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
}

.emotion-21 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 700;
  font-style: normal;
  background-color: #F6F6F6;
  margin: 1rem 0;
  padding-left: 0.5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

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

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

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

@media (min-width: 37.5rem) {
  .emotion-21 {
    padding-left: 1rem;
  }
}

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

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

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

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

@media (min-width: 80rem) {
  .emotion-23 {
    grid-auto-flow: row;
  }
}

@media (min-width: 37.5rem) {
  .emotion-23 {
    grid-template-rows: repeat(5, auto);
  }
}

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

@media (max-width: 14.9375rem) {
  .emotion-25 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-25 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-25 {
    width: calc(100%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-25 {
    width: calc(50%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-25 {
    width: calc(50%);
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 80rem) {
  .emotion-25 {
    width: calc(20%);
    display: inline-block;
    vertical-align: top;
  }
}

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

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

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

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

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

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

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

.emotion-27 {
  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-28 {
    min-width: 1rem;
  }
}

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

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

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

@media (min-width: 37.5rem) {
  .emotion-28 {
    min-width: 1.5rem;
  }
}

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-28 {
      min-width: 1.5rem;
    }
  }
}

@media (min-width: 80rem) {
  .emotion-28 {
    min-width: 1.5rem;
  }
}

.emotion-29 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,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-29 {
    font-size: 2.5rem;
    line-height: 2.75rem;
  }
}

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

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

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

.emotion-31 {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,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-31 {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

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

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

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

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

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

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

.emotion-33 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #545658;
  display: block;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
}

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

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

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

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

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

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

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

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-38 {
      min-width: 1.5rem;
    }
  }
}

@media (min-width: 80rem) {
  .emotion-38 {
    min-width: 1.5rem;
  }
}

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

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

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

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

@media (min-width: 37.5rem) {
  .emotion-68 {
    min-width: 1.5rem;
  }
}

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-68 {
      min-width: 1.5rem;
    }
  }
}

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

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

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

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

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

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

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-78 {
      min-width: 2rem;
    }
  }
}

@media (min-width: 80rem) {
  .emotion-78 {
    min-width: 1.5rem;
  }
}

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

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

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

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

@media (min-width: 37.5rem) {
  .emotion-88 {
    min-width: 1.5rem;
  }
}

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-88 {
      min-width: 2rem;
    }
  }
}

@media (min-width: 80rem) {
  .emotion-88 {
    min-width: 1.5rem;
  }
}

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

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

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

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

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

@supports (grid-template-columns: fit-content(200px)) {
  @media (min-width: 37.5rem) {
    .emotion-118 {
      min-width: 2rem;
    }
  }
}

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

<div>
  <div
    class="emotion-0"
  >
    <noscript />
    <div>
      chartbeat
    </div>
    <div
      class="emotion-1"
    >
      <div
        class="emotion-2"
      >
        <main
          class="emotion-3"
          role="main"
        >
          <div
            class="emotion-4 emotion-5"
            dir="rtl"
          >
            <h1
              class="emotion-6 emotion-7"
              id="content"
              tabindex="-1"
            >
              سرصفحه مقاله
            </h1>
          </div>
          <div
            class="emotion-8 emotion-5"
            dir="rtl"
          >
            <p
              class="emotion-10 emotion-11"
              dir="rtl"
            >
              یک پاراگراف.
            </p>
          </div>
        </main>
      </div>
    </div>
    <section
      aria-labelledby="Most-Read"
      class="emotion-12"
      data-e2e="most-read"
      data-testid="most-read"
      role="region"
    >
      <div
        class="emotion-13 emotion-14"
      >
        <h2
          class="emotion-15 emotion-16"
        >
          <span
            class="emotion-17 emotion-18"
          >
            <span
              class="emotion-19 emotion-20"
            >
              <span
                class="emotion-21 emotion-22"
                dir="rtl"
                id="Most-Read"
              >
                پربیننده‌ترین‌ها
              </span>
            </span>
          </span>
        </h2>
      </div>
      <ol
        class="emotion-23 emotion-5"
        dir="rtl"
        role="list"
      >
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-28"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۱
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/c4n9j7rx27lo"
              >
                ایران در آستانه بحران بنزین؛ تابستانی دشوار برای دولت رئیسی در پیش است
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  به روز شده در ۱۹ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-38"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۲
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/cm58lxneyrvo"
              >
                پرونده حمید نوری؛ وکلای مدافع: نوری فریب خورد
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  به روز شده در ۱۹ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-28"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۳
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/cx7e0eexdeeo"
              >
                اما رادوکانو: گاهی آرزو می‌کنم که ای کاش قهرمان اوپن آمریکا نمی‌شدم
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  به روز شده در ۱۹ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-38"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۴
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/cqe0045zrpdo"
              >
                ملی‌پوش سابق هلند برای چاقو زدن به فامیلش به ۱۸ ماه حبس محکوم شد
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  به روز شده در ۱۹ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-68"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۵
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/cjmyylvr1nvo"
              >
                وزیر خارجه آمریکا در پکن؛ شی: پیشرفت‌هایی در روابط حاصل شده است، بلینکن: رقابت نباید بدل به دشمنی شود
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  به روز شده در ۱۹ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-78"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۶
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/cyxgqq1796qo"
              >
                سگم سرطان پستان مرا تشخیص داد
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-18"
                >
                  به روز شده در ۱۸ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-88"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۷
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/cydg800g89yo"
              >
                لوح ۲۸۰۰ ساله از ایتالیا به عراق بازگردانده شد
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-18"
                >
                  به روز شده در ۱۸ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-78"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۸
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/cgr664ezld5o"
              >
                نمایندگان کشورها و نهادها در اجلاس سازمان ملل خواستار پایان یافتن سیاست‌های تبعیض‌آمیز طالبان علیه زنان شدند
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-19"
                >
                  به روز شده در ۱۹ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-88"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۹
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/c9wj7ejl17po"
              >
                چرا موبایل داغ می‌کند و چطور آن را خنک نگه داریم؟
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-18"
                >
                  به روز شده در ۱۸ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
        <li
          class="emotion-25 emotion-5"
          dir="rtl"
          role="listitem"
        >
          <div
            class="emotion-27"
          >
            <div
              class="emotion-118"
              dir="rtl"
            >
              <span
                class="emotion-29"
              >
                ۱۰
              </span>
            </div>
            <div
              class="emotion-30"
              dir="rtl"
            >
              <a
                class="focusIndicatorDisplayTableCell emotion-31"
                href="https://www.bbc.com/persian/articles/c6plvgyz614o"
              >
                هشتگ «داستان_ما_یکیست» در چهلمین سالگرد اعدام ۱۰ زن بهائی در شیراز
              </a>
              <div
                class="emotion-32"
              >
                <time
                  class="emotion-33 emotion-34"
                  datetime="2023-06-18"
                >
                  به روز شده در ۱۸ ژوئن ۲۰۲۳
                </time>
              </div>
            </div>
          </div>
        </li>
      </ol>
    </section>
  </div>
</div>
`;