src/app/components/FrostedGlassPromo/__snapshots__/index.test.tsx.snap from bbc/simorgh

src/app/components/FrostedGlassPromo/__snapshots__/index.test.tsx.snap
Summary

Maintainability

Test Coverage

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

exports[`Frosted Glass Promo when given props directly 1`] = `
.emotion-0 {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:visited a {
  color: #E6E8EA;
}

.emotion-1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.emotion-2 {
  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: #3F3F42;
}

@media (min-width: 25rem) {
  .emotion-2 {
    -webkit-background-size: 77px 22px;
    background-size: 77px 22px;
  }
}

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

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

.emotion-4 {
  height: 100%;
}

.emotion-5 {
  min-height: 100px;
  padding-bottom: 1rem;
  background-color: #202224;
}

.emotion-6 {
  margin: 0;
}

.emotion-7 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.33;
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin: 0.875rem 0.5rem 0 0.5rem;
  color: #FFFFFF;
}

.emotion-7:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

@media (min-width: 25rem) {
  .emotion-7 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0.875rem 1rem 0 1rem;
  }
}

.emotion-7:visited {
  color: #E6E8EA;
}

<div>
  <div
    class="emotion-0"
    data-testid="frosted-promo-0"
  >
    <a
      aria-hidden="true"
      class="emotion-1"
      href="/mundo/internacional-23038380"
      tabindex="-1"
    />
    <div
      class="emotion-2"
      style="padding-bottom: 0px; overflow: hidden;"
    >
      <img
        alt="Orange 2"
        class="emotion-3"
        loading="lazy"
        src="https://ichef.bbci.co.uk/news/400/cpsdevpb/DDFC/test/_63482865_orange2.jpg"
        width="976"
      />
    </div>
    <div
      class="lazyload-wrapper emotion-4"
    >
      <div
        class="emotion-5"
        data-testid="frosted-glass-lazyload-placeholder"
      >
        <h3
          class="emotion-6"
        >
          <a
            class="emotion-7"
            href="/mundo/internacional-23038380"
          >
            Además de sus decenas de museos tradicionales, Ciudad de México es una galería al aire libre de arte callejero, en la que exponen artistas nacionales y extranjeros. Lo invitamos a un recorrido.
          </a>
        </h3>
        4 mayo 2021
      </div>
    </div>
  </div>
</div>
`;

exports[`Frosted Glass Promo when given props for a CPS promo 1`] = `
.emotion-0 {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:visited a {
  color: #E6E8EA;
}

.emotion-1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.emotion-2 {
  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: #3F3F42;
}

@media (min-width: 25rem) {
  .emotion-2 {
    -webkit-background-size: 77px 22px;
    background-size: 77px 22px;
  }
}

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

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

.emotion-4 {
  height: 100%;
}

.emotion-5 {
  min-height: 100px;
  padding-bottom: 1rem;
  background-color: #202224;
}

.emotion-6 {
  margin: 0;
}

.emotion-7 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.33;
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin: 0.875rem 0.5rem 0 0.5rem;
  color: #FFFFFF;
}

.emotion-7:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

@media (min-width: 25rem) {
  .emotion-7 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0.875rem 1rem 0 1rem;
  }
}

.emotion-7:visited {
  color: #E6E8EA;
}

.emotion-8 {
  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;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8125rem;
  padding: 0.75rem 0.5rem 0 0.5rem;
  color: #E6E8EA;
}

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

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

@media (min-width: 25rem) {
  .emotion-8 {
    font-size: 0.875rem;
    padding: 0.75rem 1rem 0 1rem;
  }
}

<div>
  <div
    class="emotion-0"
    data-testid="frosted-promo-0"
  >
    <a
      aria-hidden="true"
      class="emotion-1"
      href="/mundo/internacional-23038380"
      tabindex="-1"
    />
    <div
      class="emotion-2"
      style="padding-bottom: 56.25%; overflow: hidden;"
    >
      <img
        alt="naranja 2"
        class="emotion-3"
        height="549"
        loading="lazy"
        sizes="(min-width: 1008px) 400px"
        src="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/DDFC/test/_63482865_orange2.jpg.webp"
        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/DDFC/test/_63482865_orange2.jpg.webp 400w"
        width="976"
      />
    </div>
    <div
      class="lazyload-wrapper emotion-4"
    >
      <div
        class="emotion-5"
        data-testid="frosted-glass-lazyload-placeholder"
      >
        <h3
          class="emotion-6"
        >
          <a
            class="emotion-7"
            href="/mundo/internacional-23038380"
          >
            El colorido encanto del arte callejero chilango 17
          </a>
        </h3>
        <time
          class="emotion-8 emotion-9"
          datetime="2016-05-05"
        >
          5 mayo 2016
        </time>
      </div>
    </div>
  </div>
</div>
`;

exports[`Frosted Glass Promo when given props for a Link promo 1`] = `
.emotion-0 {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:visited a {
  color: #E6E8EA;
}

.emotion-1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.emotion-2 {
  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: #3F3F42;
}

@media (min-width: 25rem) {
  .emotion-2 {
    -webkit-background-size: 77px 22px;
    background-size: 77px 22px;
  }
}

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

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

.emotion-4 {
  height: 100%;
}

.emotion-5 {
  min-height: 100px;
  padding-bottom: 1rem;
  background-color: #202224;
}

.emotion-6 {
  margin: 0;
}

.emotion-7 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.33;
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin: 0.875rem 0.5rem 0 0.5rem;
  color: #FFFFFF;
}

.emotion-7:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

@media (min-width: 25rem) {
  .emotion-7 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0.875rem 1rem 0 1rem;
  }
}

.emotion-7:visited {
  color: #E6E8EA;
}

.emotion-8 {
  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;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8125rem;
  padding: 0.75rem 0.5rem 0 0.5rem;
  color: #E6E8EA;
}

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

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

@media (min-width: 25rem) {
  .emotion-8 {
    font-size: 0.875rem;
    padding: 0.75rem 1rem 0 1rem;
  }
}

<div>
  <div
    class="emotion-0"
    data-testid="frosted-promo-0"
  >
    <a
      aria-hidden="true"
      class="emotion-1"
      href="/pidgin/sport-51434980"
      tabindex="-1"
    />
    <div
      class="emotion-2"
      style="padding-bottom: 56.25%; overflow: hidden;"
    >
      <img
        alt="E dey good for your"
        class="emotion-3"
        height="351"
        loading="lazy"
        sizes="(min-width: 1008px) 400px"
        src="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/C105/test/_63731494__110870927_climategrief5.jpg.webp"
        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/C105/test/_63731494__110870927_climategrief5.jpg.webp 400w"
        width="624"
      />
    </div>
    <div
      class="lazyload-wrapper emotion-4"
    >
      <div
        class="emotion-5"
        data-testid="frosted-glass-lazyload-placeholder"
      >
        <h3
          class="emotion-6"
        >
          <a
            class="emotion-7"
            href="/pidgin/sport-51434980"
          >
            Man City vs West Ham: Bad weather force Premier League to cancel Sunday match
          </a>
        </h3>
        <time
          class="emotion-8 emotion-9"
          datetime="2020-02-17"
        >
          17 febrero 2020
        </time>
      </div>
    </div>
  </div>
</div>
`;

exports[`Frosted Glass Promo when given props for a Optimo promo 1`] = `
.emotion-0 {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:visited a {
  color: #E6E8EA;
}

.emotion-1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.emotion-2 {
  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: #3F3F42;
}

@media (min-width: 25rem) {
  .emotion-2 {
    -webkit-background-size: 77px 22px;
    background-size: 77px 22px;
  }
}

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

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

.emotion-4 {
  height: 100%;
}

.emotion-5 {
  min-height: 100px;
  padding-bottom: 1rem;
  background-color: #202224;
}

.emotion-6 {
  margin: 0;
}

.emotion-7 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.33;
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin: 0.875rem 0.5rem 0 0.5rem;
  color: #FFFFFF;
}

.emotion-7:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

@media (min-width: 25rem) {
  .emotion-7 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0.875rem 1rem 0 1rem;
  }
}

.emotion-7:visited {
  color: #E6E8EA;
}

.emotion-8 {
  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;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8125rem;
  padding: 0.75rem 0.5rem 0 0.5rem;
  color: #E6E8EA;
}

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

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

@media (min-width: 25rem) {
  .emotion-8 {
    font-size: 0.875rem;
    padding: 0.75rem 1rem 0 1rem;
  }
}

<div>
  <div
    class="emotion-0"
    data-testid="frosted-promo-0"
  >
    <a
      aria-hidden="true"
      class="emotion-1"
      href="/kyrgyz/articles/cemg3359nwro"
      tabindex="-1"
    />
    <div
      class="emotion-2"
      style="padding-bottom: 56.25%; overflow: hidden;"
    >
      <img
        alt="test"
        class="emotion-3"
        height="450"
        loading="lazy"
        sizes="(min-width: 1008px) 400px"
        src="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/2105/test/a7436f40-a2dd-11ed-9015-6935ab4fa6ca.jpg.webp"
        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsdevpb/2105/test/a7436f40-a2dd-11ed-9015-6935ab4fa6ca.jpg.webp 400w"
        width="800"
      />
    </div>
    <div
      class="lazyload-wrapper emotion-4"
    >
      <div
        class="emotion-5"
        data-testid="frosted-glass-lazyload-placeholder"
      >
        <h3
          class="emotion-6"
        >
          <a
            class="emotion-7"
            href="/kyrgyz/articles/cemg3359nwro"
          >
            “Баланы сабады деп аялымды камап салышарын өзүм да билген эмесмин”
          </a>
        </h3>
        <time
          class="emotion-8 emotion-9"
          datetime="2023-02-02"
        >
          2 febrero 2023
        </time>
      </div>
    </div>
  </div>
</div>
`;

exports[`Frosted Glass Promo when given props for an a Optimo promo with no image 1`] = `
.emotion-0 {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.emotion-0:hover a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.emotion-0:visited a {
  color: #E6E8EA;
}

.emotion-1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.emotion-2 {
  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: #3F3F42;
}

@media (min-width: 25rem) {
  .emotion-2 {
    -webkit-background-size: 77px 22px;
    background-size: 77px 22px;
  }
}

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

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

.emotion-4 {
  height: 100%;
}

.emotion-5 {
  min-height: 100px;
  padding-bottom: 1rem;
  background-color: #202224;
}

.emotion-6 {
  margin: 0;
}

.emotion-7 {
  font-family: ReithSerif,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.33;
  display: inline-block;
  -webkit-text-decoration: none;
  text-decoration: none;
  margin: 0.875rem 0.5rem 0 0.5rem;
  color: #FFFFFF;
}

.emotion-7:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

@media (min-width: 25rem) {
  .emotion-7 {
    font-size: 1rem;
    line-height: 1.25;
    margin: 0.875rem 1rem 0 1rem;
  }
}

.emotion-7:visited {
  color: #E6E8EA;
}

.emotion-8 {
  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;
  font-family: ReithSans,Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8125rem;
  padding: 0.75rem 0.5rem 0 0.5rem;
  color: #E6E8EA;
}

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

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

@media (min-width: 25rem) {
  .emotion-8 {
    font-size: 0.875rem;
    padding: 0.75rem 1rem 0 1rem;
  }
}

<div>
  <div
    class="emotion-0"
    data-testid="frosted-promo-0"
  >
    <a
      aria-hidden="true"
      class="emotion-1"
      href="/kyrgyz/articles/cemg3359nwro"
      tabindex="-1"
    />
    <div
      class="emotion-2"
      style="padding-bottom: 0px; overflow: hidden;"
    >
      <img
        alt=""
        class="emotion-3"
        loading="lazy"
        sizes="(min-width: 1008px) 400px"
        src="https://ichef.bbci.co.uk/ace/ws/400/cpsprodpb/36D1/production/_127933041__63970643_bbc-news-world-service-logo-nc.png.webp"
        srcset="https://ichef.bbci.co.uk/ace/ws/400/cpsprodpb/36D1/production/_127933041__63970643_bbc-news-world-service-logo-nc.png.webp 400w"
        width="400"
      />
    </div>
    <div
      class="lazyload-wrapper emotion-4"
    >
      <div
        class="emotion-5"
        data-testid="frosted-glass-lazyload-placeholder"
      >
        <h3
          class="emotion-6"
        >
          <a
            class="emotion-7"
            href="/kyrgyz/articles/cemg3359nwro"
          >
            “Баланы сабады деп аялымды камап салышарын өзүм да билген эмесмин”
          </a>
        </h3>
        <time
          class="emotion-8 emotion-9"
          datetime="2023-02-02"
        >
          2 febrero 2023
        </time>
      </div>
    </div>
  </div>
</div>
`;