bbc/simorgh

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

exports[`OnDemand TV Brand Page  Dark Mode Design - should match snapshot 1`] = `
.emotion-0 {
  background-color: #141414;
}

.emotion-2 {
  width: 100%;
  padding-bottom: 2rem;
}

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

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

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

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

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

@media (min-width: 63rem) {
  .emotion-2 {
    width: 100%;
  }
}

@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 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

.emotion-7 {
  position: relative;
  width: 100%;
  margin: 0 0 1.5rem 0;
  aspect-ratio: 16/9;
}

@media (min-width: 63rem) {
  .emotion-7 {
    margin: 2.5rem 0px 0px;
  }
}

@media (max-width: 62.9375rem) {
  .emotion-7 {
    margin-top: 1rem;
  }
}

@media (max-width: 37.4375rem) {
  .emotion-7 {
    margin: 1rem -1rem 0px;
  }
}

@media (max-width: 24.9375rem) {
  .emotion-7 {
    margin: 0.5rem -0.5rem 0px;
  }
}

.emotion-8 {
  position: relative;
  cursor: pointer;
  height: 100%;
}

.no-js .emotion-8 {
  cursor: default;
}

.emotion-8:hover .focusIndicatorRemove,
.emotion-8:focus .focusIndicatorRemove {
  background-color: #B80000;
}

.emotion-9 {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-style: normal;
  font-weight: 400;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 0.0625rem solid transparent;
  color: #FFFFFF;
  z-index: 1;
}

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

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

.no-js .emotion-9 {
  background-color: rgba(34, 34, 34, 0.75);
}

@media screen and (forced-colors: active) {
  .no-js .emotion-9 {
    background-color: transparent;
  }
}

.no-js .emotion-9 .guidance-message {
  display: none;
}

.emotion-10 {
  display: block;
  font-weight: normal;
  padding: 0.5rem;
  border-bottom: 0.0625rem solid transparent;
  position: absolute;
  bottom: 0;
}

@media screen and (forced-colors: active) {
  .emotion-10 {
    background-color: window;
  }
}

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

.emotion-10 strong {
  font-weight: normal;
}

.emotion-11 {
  font-size: 0.75rem;
  line-height: 1.125rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-style: normal;
  font-weight: 700;
  background-color: #222222;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  height: 5rem;
  width: 5rem;
  padding: 0;
  -webkit-transition: background-color 300ms;
  transition: background-color 300ms;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

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

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

.emotion-11:hover,
.emotion-11:focus {
  background-color: #B80000;
  -webkit-transition: background-color 300ms;
  transition: background-color 300ms;
}

.no-js .emotion-11 {
  display: none;
}

.emotion-11:focus-visible::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 0.1875rem #FFFFFF inset;
  border: 0.1875rem solid #000000;
}

.emotion-13 {
  margin-top: 0.5rem;
}

.emotion-13>svg {
  color: #FFFFFF;
  fill: currentColor;
  height: 1.5rem;
  width: 1.5rem;
}

.emotion-14 {
  vertical-align: middle;
  margin: 0 0.25rem;
  color: #222222;
  fill: currentColor;
  width: 0.75rem;
  height: 0.75rem;
}

.emotion-16 {
  display: block;
  margin-top: 0.5rem;
}

.emotion-17 {
  position: relative;
  height: 100%;
  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-17 {
    -webkit-background-size: 77px 22px;
    background-size: 77px 22px;
  }
}

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

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

.emotion-20 {
  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: #F6F6F6;
  display: block;
  margin: 0;
  padding: 2rem 0;
}

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

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

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

@media (max-width: 62.9375rem) {
  .emotion-20 {
    padding: 0.5rem 0;
  }
}

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

.emotion-22 {
  display: block;
  line-height: 1;
  width: 100%;
  padding-bottom: 0.5rem;
  word-break: break-word;
}

@media (min-width: 37.5rem) {
  .emotion-22 {
    padding-bottom: 1rem;
    word-break: break-word;
    line-height: 1.09;
  }
}

.emotion-25 {
  display: inline-block;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  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-25 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

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

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

@media (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 (max-width: 14.9375rem) {
  .emotion-27 {
    padding: 0 0.5rem;
    margin-right: 0%;
  }
}

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

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

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

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

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

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

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

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

.emotion-29 {
  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: #F6F6F6;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-bottom: 16px;
}

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

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

@media (max-width: 62.9375rem) {
  .emotion-29 {
    padding-bottom: 0.5rem;
  }
}

.emotion-31 {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #AEAEB5;
  display: inline-block;
}

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

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

<div>
  <div
    class="emotion-0"
  >
    <div>
      chartbeat
    </div>
    <noscript />
    <main
      class="emotion-1 emotion-2 emotion-3"
      dir="rtl"
      role="main"
    >
      <div
        class="emotion-4 emotion-3"
        dir="rtl"
      >
        <h1
          class="emotion-6"
          id="content"
          tabindex="-1"
        >
           د بي بي سي خبرونه , ۱۷ سپتمبر ۲۰۲۴
        </h1>
        <figure
          class="emotion-7"
          data-e2e="media-loader__container"
        >
          <div
            class="emotion-8"
            data-e2e="media-loader__placeholder"
          >
            <div
              class="emotion-9"
              data-e2e="media-player__guidance"
            >
              <noscript
                class="emotion-10"
              />
            </div>
            <button
              class="focusIndicatorRemove emotion-11"
              type="button"
            >
              <span
                class="emotion-6"
              >
                Play video, " د بي بي سي خبرونه ", موده 28,00
              </span>
              <div
                aria-hidden="true"
                class="emotion-13"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-14 emotion-15"
                  focusable="false"
                  height="12"
                  viewBox="0 0 12 12"
                  width="12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <path
                      d="M.5.6h12v12H.5z"
                    />
                    <path
                      d="M2.144.96v11.28l8.712-5.64z"
                      fill="currentColor"
                    />
                  </g>
                </svg>
              </div>
              <time
                aria-hidden="true"
                class="emotion-16"
                datetime="PT28M"
              >
                28:00
              </time>
            </button>
            <div
              class="emotion-17"
              style="padding-bottom: 0px; overflow: hidden;"
            >
              <img
                alt=""
                class="emotion-18"
                src="https://ichef.bbci.co.uk/images/ic/$recipe/p08b23c8.png"
                srcset="https://ichef.bbci.co.uk/images/ic/240xn/p08b23c8.png.webp 240w, https://ichef.bbci.co.uk/images/ic/320xn/p08b23c8.png.webp 320w, https://ichef.bbci.co.uk/images/ic/480xn/p08b23c8.png.webp 480w, https://ichef.bbci.co.uk/images/ic/624xn/p08b23c8.png.webp 624w, https://ichef.bbci.co.uk/images/ic/800xn/p08b23c8.png.webp 800w"
              />
            </div>
          </div>
        </figure>
        <strong
          aria-hidden="true"
          class="emotion-19 emotion-20 emotion-21"
        >
          <span
            class="emotion-22 emotion-23"
            data-testid="brand-title"
          >
             د بي بي سي خبرونه 
          </span>
          <span
            class="emotion-6"
          >
            , 
          </span>
          <span
            class="emotion-25 emotion-26"
            data-testid="sub-heading"
          >
             د بي بي سي خبرونه 
          </span>
        </strong>
      </div>
      <div
        class="emotion-27 emotion-3"
        dir="rtl"
      >
        <p
          class="emotion-29 emotion-30"
        >
          نړۍ دا وخت، د نړۍ او سیمې وروستۍ پرمختیاوې یادوي
        </p>
        <time
          class="emotion-31 emotion-32"
          datetime="۲۰۲۴-۰۹-۱۷"
        >
          ۱۷ سپتمبر ۲۰۲۴
        </time>
      </div>
    </main>
  </div>
</div>
`;

exports[`OnDemand TV Brand Page  should show the expired content message if episode is expired 1`] = `
.emotion-0 {
  background-color: #141414;
}

.emotion-2 {
  width: 100%;
  padding-bottom: 2rem;
}

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

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

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

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

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

@media (min-width: 63rem) {
  .emotion-2 {
    width: 100%;
  }
}

@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 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

.emotion-7 {
  margin: 2.5rem 0 1.5rem;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

@media (max-width: 62.9375rem) {
  .emotion-7 {
    margin-top: 1rem;
  }
}

@media (max-width: 37.4375rem) {
  .emotion-7 {
    margin: 1rem -1rem 0;
  }
}

@media (max-width: 24.9375rem) {
  .emotion-7 {
    margin: 0.5rem -0.5rem 0;
  }
}

.emotion-9 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.0625rem solid transparent;
  color: #FFFFFF;
  background-color: rgba(34, 34, 34, 0.75);
}

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

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

@media screen and (forced-colors: active) {
  .emotion-9 {
    background-color: transparent;
  }
}

.emotion-10 {
  display: block;
  font-weight: normal;
  bottom: 0;
  position: absolute;
  padding: 0.5rem;
}

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

@media screen and (forced-colors: active) {
  .emotion-10 {
    background-color: window;
  }
}

.emotion-12 {
  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: #F6F6F6;
  display: block;
  margin: 0;
  padding: 2rem 0;
}

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

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

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

@media (max-width: 62.9375rem) {
  .emotion-12 {
    padding: 0.5rem 0;
  }
}

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

.emotion-14 {
  display: block;
  line-height: 1;
  width: 100%;
  padding-bottom: 0.5rem;
  word-break: break-word;
}

@media (min-width: 37.5rem) {
  .emotion-14 {
    padding-bottom: 1rem;
    word-break: break-word;
    line-height: 1.09;
  }
}

.emotion-17 {
  display: inline-block;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  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-17 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

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

@media (max-width: 22.5rem) and (min-width: 15rem) {
  .emotion-17 {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.emotion-21 {
  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: #F6F6F6;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-bottom: 16px;
}

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

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

@media (max-width: 62.9375rem) {
  .emotion-21 {
    padding-bottom: 0.5rem;
  }
}

.emotion-23 {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #AEAEB5;
  display: inline-block;
}

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

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

<div>
  <div
    class="emotion-0"
  >
    <div>
      chartbeat
    </div>
    <noscript />
    <main
      class="emotion-1 emotion-2 emotion-3"
      dir="rtl"
      role="main"
    >
      <div
        class="emotion-4 emotion-3"
        dir="rtl"
      >
        <h1
          class="emotion-6"
          id="content"
          tabindex="-1"
        >
           د بي بي سي خبرونه , ۱۷ سپتمبر ۲۰۲۴
        </h1>
        <div
          class="emotion-7 emotion-8"
        >
          <div>
            <div
              class="emotion-9"
            >
              <strong
                class="emotion-10"
              >
                دغه فایل نور د لاسرسي وړ نه دی.
              </strong>
            </div>
          </div>
        </div>
        <strong
          aria-hidden="true"
          class="emotion-11 emotion-12 emotion-13"
        >
          <span
            class="emotion-14 emotion-15"
            data-testid="brand-title"
          >
             د بي بي سي خبرونه 
          </span>
          <span
            class="emotion-6"
          >
            , 
          </span>
          <span
            class="emotion-17 emotion-18"
            data-testid="sub-heading"
          >
             د بي بي سي خبرونه 
          </span>
        </strong>
      </div>
      <div
        class="emotion-19 emotion-3"
        dir="rtl"
      >
        <p
          class="emotion-21 emotion-22"
        >
          نړۍ دا وخت، د نړۍ او سیمې وروستۍ پرمختیاوې یادوي
        </p>
        <time
          class="emotion-23 emotion-24"
          datetime="۲۰۲۴-۰۹-۱۷"
        >
          ۱۷ سپتمبر ۲۰۲۴
        </time>
      </div>
    </main>
  </div>
</div>
`;

exports[`OnDemand TV Brand Page  should show the future content message if episode is not yet available 1`] = `
.emotion-0 {
  background-color: #141414;
}

.emotion-2 {
  width: 100%;
  padding-bottom: 2rem;
}

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

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

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

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

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

@media (min-width: 63rem) {
  .emotion-2 {
    width: 100%;
  }
}

@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 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

.emotion-7 {
  margin: 2.5rem 0 1.5rem;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

@media (max-width: 62.9375rem) {
  .emotion-7 {
    margin-top: 1rem;
  }
}

@media (max-width: 37.4375rem) {
  .emotion-7 {
    margin: 1rem -1rem 0;
  }
}

@media (max-width: 24.9375rem) {
  .emotion-7 {
    margin: 0.5rem -0.5rem 0;
  }
}

.emotion-9 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.0625rem solid transparent;
  color: #FFFFFF;
  background-color: rgba(34, 34, 34, 0.75);
}

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

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

@media screen and (forced-colors: active) {
  .emotion-9 {
    background-color: transparent;
  }
}

.emotion-10 {
  display: block;
  font-weight: normal;
  bottom: 0;
  position: absolute;
  padding: 0.5rem;
}

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

@media screen and (forced-colors: active) {
  .emotion-10 {
    background-color: window;
  }
}

.emotion-12 {
  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: #F6F6F6;
  display: block;
  margin: 0;
  padding: 2rem 0;
}

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

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

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

@media (max-width: 62.9375rem) {
  .emotion-12 {
    padding: 0.5rem 0;
  }
}

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

.emotion-14 {
  display: block;
  line-height: 1;
  width: 100%;
  padding-bottom: 0.5rem;
  word-break: break-word;
}

@media (min-width: 37.5rem) {
  .emotion-14 {
    padding-bottom: 1rem;
    word-break: break-word;
    line-height: 1.09;
  }
}

.emotion-17 {
  display: inline-block;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  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-17 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

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

@media (max-width: 22.5rem) and (min-width: 15rem) {
  .emotion-17 {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.emotion-21 {
  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: #F6F6F6;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-bottom: 16px;
}

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

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

@media (max-width: 62.9375rem) {
  .emotion-21 {
    padding-bottom: 0.5rem;
  }
}

.emotion-23 {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #AEAEB5;
  display: inline-block;
}

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

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

<div>
  <div
    class="emotion-0"
  >
    <div>
      chartbeat
    </div>
    <noscript />
    <main
      class="emotion-1 emotion-2 emotion-3"
      dir="rtl"
      role="main"
    >
      <div
        class="emotion-4 emotion-3"
        dir="rtl"
      >
        <h1
          class="emotion-6"
          id="content"
          tabindex="-1"
        >
           د بي بي سي خبرونه , ۱۷ سپتمبر ۲۰۲۴
        </h1>
        <div
          class="emotion-7 emotion-8"
        >
          <div>
            <div
              class="emotion-9"
            >
              <strong
                class="emotion-10"
              >
                دغه پروګرام د خپرولو لپاره چمتو نه دی.
              </strong>
            </div>
          </div>
        </div>
        <strong
          aria-hidden="true"
          class="emotion-11 emotion-12 emotion-13"
        >
          <span
            class="emotion-14 emotion-15"
            data-testid="brand-title"
          >
             د بي بي سي خبرونه 
          </span>
          <span
            class="emotion-6"
          >
            , 
          </span>
          <span
            class="emotion-17 emotion-18"
            data-testid="sub-heading"
          >
             د بي بي سي خبرونه 
          </span>
        </strong>
      </div>
      <div
        class="emotion-19 emotion-3"
        dir="rtl"
      >
        <p
          class="emotion-21 emotion-22"
        >
          نړۍ دا وخت، د نړۍ او سیمې وروستۍ پرمختیاوې یادوي
        </p>
        <time
          class="emotion-23 emotion-24"
          datetime="۲۰۲۴-۰۹-۱۷"
        >
          ۱۷ سپتمبر ۲۰۲۴
        </time>
      </div>
    </main>
  </div>
</div>
`;

exports[`OnDemand TV Brand Page  should show the future content message if episode is pending 1`] = `
.emotion-0 {
  background-color: #141414;
}

.emotion-2 {
  width: 100%;
  padding-bottom: 2rem;
}

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

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

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

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

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

@media (min-width: 63rem) {
  .emotion-2 {
    width: 100%;
  }
}

@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 {
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  margin: 0;
}

.emotion-7 {
  margin: 2.5rem 0 1.5rem;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

@media (max-width: 62.9375rem) {
  .emotion-7 {
    margin-top: 1rem;
  }
}

@media (max-width: 37.4375rem) {
  .emotion-7 {
    margin: 1rem -1rem 0;
  }
}

@media (max-width: 24.9375rem) {
  .emotion-7 {
    margin: 0.5rem -0.5rem 0;
  }
}

.emotion-9 {
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.0625rem solid transparent;
  color: #FFFFFF;
  background-color: rgba(34, 34, 34, 0.75);
}

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

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

@media screen and (forced-colors: active) {
  .emotion-9 {
    background-color: transparent;
  }
}

.emotion-10 {
  display: block;
  font-weight: normal;
  bottom: 0;
  position: absolute;
  padding: 0.5rem;
}

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

@media screen and (forced-colors: active) {
  .emotion-10 {
    background-color: window;
  }
}

.emotion-12 {
  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: #F6F6F6;
  display: block;
  margin: 0;
  padding: 2rem 0;
}

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

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

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

@media (max-width: 62.9375rem) {
  .emotion-12 {
    padding: 0.5rem 0;
  }
}

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

.emotion-14 {
  display: block;
  line-height: 1;
  width: 100%;
  padding-bottom: 0.5rem;
  word-break: break-word;
}

@media (min-width: 37.5rem) {
  .emotion-14 {
    padding-bottom: 1rem;
    word-break: break-word;
    line-height: 1.09;
  }
}

.emotion-17 {
  display: inline-block;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
  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-17 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

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

@media (max-width: 22.5rem) and (min-width: 15rem) {
  .emotion-17 {
    font-size: 1.125rem;
    line-height: 1.375rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.emotion-21 {
  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: #F6F6F6;
  padding-bottom: 1.5rem;
  margin: 0;
  padding-bottom: 16px;
}

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

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

@media (max-width: 62.9375rem) {
  .emotion-21 {
    padding-bottom: 0.5rem;
  }
}

.emotion-23 {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-family: "BBC Reith Qalam","Times New Roman",Arial,Verdana,Geneva,Helvetica,sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #AEAEB5;
  display: inline-block;
}

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

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

<div>
  <div
    class="emotion-0"
  >
    <div>
      chartbeat
    </div>
    <noscript />
    <main
      class="emotion-1 emotion-2 emotion-3"
      dir="rtl"
      role="main"
    >
      <div
        class="emotion-4 emotion-3"
        dir="rtl"
      >
        <h1
          class="emotion-6"
          id="content"
          tabindex="-1"
        >
           د بي بي سي خبرونه , ۱۷ سپتمبر ۲۰۲۴
        </h1>
        <div
          class="emotion-7 emotion-8"
        >
          <div>
            <div
              class="emotion-9"
            >
              <strong
                class="emotion-10"
              >
                دغه پروګرام د خپرولو لپاره چمتو نه دی.
              </strong>
            </div>
          </div>
        </div>
        <strong
          aria-hidden="true"
          class="emotion-11 emotion-12 emotion-13"
        >
          <span
            class="emotion-14 emotion-15"
            data-testid="brand-title"
          >
             د بي بي سي خبرونه 
          </span>
          <span
            class="emotion-6"
          >
            , 
          </span>
          <span
            class="emotion-17 emotion-18"
            data-testid="sub-heading"
          >
             د بي بي سي خبرونه 
          </span>
        </strong>
      </div>
      <div
        class="emotion-19 emotion-3"
        dir="rtl"
      >
        <p
          class="emotion-21 emotion-22"
        >
          نړۍ دا وخت، د نړۍ او سیمې وروستۍ پرمختیاوې یادوي
        </p>
        <time
          class="emotion-23 emotion-24"
          datetime="۲۰۲۴-۰۹-۱۷"
        >
          ۱۷ سپتمبر ۲۰۲۴
        </time>
      </div>
    </main>
  </div>
</div>
`;