src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap

Summary

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

exports[`Radio Page Main should match snapshot for Canonical 1`] = `
.emotion-1 {
  width: 100%;
}

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

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

  @media (min-width: 80rem) {
    .emotion-1 {
      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-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.emotion-9 {
  background-color: #F2F2F2;
  padding: 0 1rem;
  content-visibility: auto;
  contain-intrinsic-size: 59.375rem;
}

@media (min-width: 15rem) {
  .emotion-9 {
    contain-intrinsic-size: 56.563rem;
  }
}

@media (min-width: 25rem) {
  .emotion-9 {
    contain-intrinsic-size: 51.063rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-9 {
    contain-intrinsic-size: 30.75rem;
  }
}

@media (min-width: 63rem) {
  .emotion-9 {
    contain-intrinsic-size: 21.25rem;
  }
}

.emotion-12 {
  position: relative;
  z-index: 0;
  color: #141414;
  margin-top: 2rem;
  margin: 0 auto;
  width: 100%;
  padding-top: 0.5rem;
}

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

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

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

@media (min-width: 63rem) {
  .emotion-12 {
    max-width: 63rem;
    padding-top: 2rem;
  }
}

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

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

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

.emotion-20 {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  background-color: #F2F2F2;
  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-20 {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }
}

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

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

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

.emotion-22 {
  margin: 0 auto;
  width: 100%;
  padding-bottom: 1rem;
}

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

@media (min-width: 63rem) {
  .emotion-22 {
    max-width: 63rem;
    padding-bottom: 1.5rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.emotion-28 {
  position: relative;
  padding-bottom: 1rem;
}

@media (max-width: 14.9375rem) {
  .emotion-28 {
    width: calc(4/4*(100% - 4 * 0.5rem) + 3 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 15rem) and (max-width: 24.9375rem) {
  .emotion-28 {
    width: calc(4/4*(100% - 4 * 0.5rem) + 3 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 25rem) and (max-width: 37.4375rem) {
  .emotion-28 {
    width: calc(6/6*(100% - 6 * 0.5rem) + 5 * 0.5rem );
    margin: 0 0.25rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
  .emotion-28 {
    width: calc(3/6*(100% - 6 * 1rem) + 2 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 63rem) and (max-width: 79.9375rem) {
  .emotion-28 {
    width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

@media (min-width: 80rem) {
  .emotion-28 {
    width: calc(2/8*(100% - 8 * 1rem) + 1 * 1rem );
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
  }
}

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

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

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

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

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

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

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

@supports (grid-template-columns: fit-content(200px)) {
  .emotion-28 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.emotion-30 {
  padding-bottom: 0.5rem;
}

.emotion-32 {
  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;
}

.emotion-34 {
  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;
  padding-right: 0.25rem;
}

.emotion-34>svg {
  color: #5A5A5A;
  margin: 0;
  overflow: visible;
}

@media screen and (forced-colors: active) {
  .emotion-34>svg {
    fill: canvasText;
  }
}

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

.emotion-38 {
  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;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}

.emotion-38>time {
  color: #5A5A5A;
  font-size: 0.75rem;
  line-height: 1rem;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media (min-width: 20rem) and (max-width: 37.4375rem) {
  .emotion-38>time {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 37.5rem) {
  .emotion-38>time {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

.emotion-38::after {
  content: '';
  border-top: 0.0625rem solid #AEAEB5;
  top: 1rem;
  margin-left: 0.625rem;
  width: 100%;
}

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

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

.emotion-42 {
  padding-top: 0.5rem;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  outline: 0.0625rem solid transparent;
  height: 100%;
}

.emotion-44 {
  padding: 0 0.5rem;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.emotion-46 {
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #222222;
  margin: 0;
}

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

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

.emotion-48 {
  position: static;
  color: #222222;
  -webkit-text-decoration: none;
  text-decoration: none;
  overflow-wrap: break-word;
  display: inline-block;
}

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

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

.emotion-48:visited {
  color: #6E6E73;
}

.emotion-48:hover .emotion-53 {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

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

.emotion-50 {
  -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-52 {
  color: #3F3F42;
  padding: 0.5rem 0 0 0;
  display: inline-block;
  width: 100%;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

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

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

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

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

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

.emotion-57 {
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5rem;
  background-color: #222222;
  outline: 0.0625rem solid transparent;
  color: #FFFFFF;
}

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

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

@media screen and (-ms-high-contrast: active) {
  .emotion-57 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-59>svg {
  color: #FFFFFF;
  fill: currentColor;
  width: 1.0625rem;
  height: 0.75rem;
  margin: 0;
}

@media screen and (forced-colors: active) {
  .emotion-59>svg {
    fill: canvasText;
  }
}

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

.emotion-63 {
  padding-left: 0.5rem;
}

.emotion-160 {
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #6E6E73;
  margin: 0;
}

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

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

.emotion-163 {
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: #B80000;
  display: inline-block;
  margin-right: 0.5rem;
}

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

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

.emotion-166 {
  color: #6E6E73;
  padding: 0.5rem 0 0 0;
  display: inline-block;
  width: 100%;
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

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

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

.emotion-171 {
  font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.5rem;
  background-color: #FFFFFF;
  outline: 0.0625rem solid transparent;
  color: #B80000;
}

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

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

@media screen and (-ms-high-contrast: active) {
  .emotion-171 {
    background-color: transparent;
    outline: none;
  }
}

.emotion-173>svg {
  color: #B80000;
  fill: currentColor;
  width: 1.0625rem;
  height: 0.75rem;
  margin: 0;
}

@media screen and (forced-colors: active) {
  .emotion-173>svg {
    fill: canvasText;
  }
}

<div>
  <noscript />
  <div>
    chartbeat
  </div>
  <main
    class="emotion-0 emotion-1 emotion-2"
    dir="ltr"
    role="main"
  >
    <div
      class="emotion-3 emotion-2"
      dir="ltr"
    >
      <h1
        class="emotion-5 emotion-6"
        id="content"
        tabindex="-1"
      >
        BBC Afrique Radio
      </h1>
      <p
        class="emotion-7 emotion-8"
      >
        Infos, musique et sports
      </p>
    </div>
  </main>
  <section
    aria-labelledby="Radio-Schedule"
    class="emotion-9 emotion-10"
    data-testid="radio-schedule"
    role="region"
  >
    <div
      class="emotion-11 emotion-12 emotion-13"
    >
      <h2
        class="emotion-14 emotion-15"
      >
        <span
          class="emotion-16 emotion-17"
        >
          <span
            class="emotion-18 emotion-19"
          >
            <span
              class="emotion-20 emotion-21"
              dir="ltr"
              id="Radio-Schedule"
            >
              Journaux et Magazines
            </span>
          </span>
        </span>
      </h2>
    </div>
    <div
      class="emotion-22 emotion-23"
      data-e2e="radio-schedule"
    >
      <div
        class="emotion-24 emotion-25 emotion-2"
        dir="ltr"
        role="list"
      >
        <li
          class="emotion-27 emotion-28 emotion-2"
          data-e2e="onDemand"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-30 emotion-31"
          >
            <div
              class="emotion-32 emotion-33"
            >
              <span
                class="emotion-34 emotion-35"
                dir="ltr"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-36 emotion-37"
                  focusable="false"
                  height="13"
                  viewBox="0 0 13 13"
                  width="13"
                >
                  <path
                    d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
                  />
                  <path
                    d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
                  />
                </svg>
              </span>
              <span
                aria-hidden="true"
                class="emotion-38 emotion-39"
                dir="ltr"
              >
                <time
                  class="emotion-40 emotion-41"
                  datetime="2020-03-26"
                >
                  05:30
                </time>
              </span>
            </div>
          </div>
          <div
            class="emotion-42 emotion-43"
          >
            <div
              class="emotion-44 emotion-45"
            >
              <h3
                class="emotion-46 emotion-47"
              >
                <a
                  aria-labelledby="scheduleItem-p086pmts"
                  class="focusIndicatorDisplayBlock emotion-48 emotion-49"
                  href="/afrique/bbc_afrique_radio/w172x371xccjp2q"
                >
                  <span
                    id="scheduleItem-p086pmts"
                    role="text"
                  >
                    <span
                      class="emotion-50"
                    >
                      Ecoutez, 
                    </span>
                    Actu Monde
                    <span
                      class="emotion-50"
                    >
                      , 05:30, 
                    </span>
                    <span
                      class="emotion-52 emotion-53"
                    >
                      26 mars 2020
                    </span>
                    <span
                      class="emotion-50"
                    >
                      , Durée 06,00 
                    </span>
                  </span>
                </a>
              </h3>
              <p
                class="emotion-55 emotion-56"
              >
                C'est la principale tranche dédiée à l'actualité internationale. De 5H 30 à 6H 30, des interviews d'analystes et des information
              </p>
            </div>
            <div
              class="emotion-57 emotion-58"
            >
              <span
                class="emotion-59 emotion-60"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-61 emotion-62"
                  focusable="false"
                  height="12px"
                  viewBox="0 0 13 12"
                  width="13px"
                >
                  <path
                    d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
                  />
                  <path
                    d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
                  />
                </svg>
              </span>
              <time
                class="emotion-63 emotion-64"
                datetime="PT6M"
                dir="ltr"
              >
                <span
                  aria-hidden="true"
                >
                  06:00
                </span>
              </time>
            </div>
          </div>
        </li>
        <li
          class="emotion-27 emotion-28 emotion-2"
          data-e2e="onDemand"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-30 emotion-31"
          >
            <div
              class="emotion-32 emotion-33"
            >
              <span
                class="emotion-34 emotion-35"
                dir="ltr"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-36 emotion-37"
                  focusable="false"
                  height="13"
                  viewBox="0 0 13 13"
                  width="13"
                >
                  <path
                    d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
                  />
                  <path
                    d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
                  />
                </svg>
              </span>
              <span
                aria-hidden="true"
                class="emotion-38 emotion-39"
                dir="ltr"
              >
                <time
                  class="emotion-40 emotion-41"
                  datetime="2020-03-26"
                >
                  05:16
                </time>
              </span>
            </div>
          </div>
          <div
            class="emotion-42 emotion-43"
          >
            <div
              class="emotion-44 emotion-45"
            >
              <h3
                class="emotion-46 emotion-47"
              >
                <a
                  aria-labelledby="scheduleItem-p086pmv1"
                  class="focusIndicatorDisplayBlock emotion-48 emotion-49"
                  href="/afrique/bbc_afrique_radio/w172x6djbb3rg44"
                >
                  <span
                    id="scheduleItem-p086pmv1"
                    role="text"
                  >
                    <span
                      class="emotion-50"
                    >
                      Ecoutez, 
                    </span>
                    Reportage
                    <span
                      class="emotion-50"
                    >
                      , 05:16, 
                    </span>
                    <span
                      class="emotion-52 emotion-53"
                    >
                      26 mars 2020
                    </span>
                    <span
                      class="emotion-50"
                    >
                      , Durée 08,00 
                    </span>
                  </span>
                </a>
              </h3>
              <p
                class="emotion-55 emotion-56"
              >
                Un sujet traité en profondeur et qui fait appel aux différents genres journalistiques.
              </p>
            </div>
            <div
              class="emotion-57 emotion-58"
            >
              <span
                class="emotion-59 emotion-60"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-61 emotion-62"
                  focusable="false"
                  height="12px"
                  viewBox="0 0 13 12"
                  width="13px"
                >
                  <path
                    d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
                  />
                  <path
                    d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
                  />
                </svg>
              </span>
              <time
                class="emotion-63 emotion-64"
                datetime="PT8M"
                dir="ltr"
              >
                <span
                  aria-hidden="true"
                >
                  08:00
                </span>
              </time>
            </div>
          </div>
        </li>
        <li
          class="emotion-27 emotion-28 emotion-2"
          data-e2e="onDemand"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-30 emotion-31"
          >
            <div
              class="emotion-32 emotion-33"
            >
              <span
                class="emotion-34 emotion-35"
                dir="ltr"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-36 emotion-37"
                  focusable="false"
                  height="13"
                  viewBox="0 0 13 13"
                  width="13"
                >
                  <path
                    d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
                  />
                  <path
                    d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
                  />
                </svg>
              </span>
              <span
                aria-hidden="true"
                class="emotion-38 emotion-39"
                dir="ltr"
              >
                <time
                  class="emotion-40 emotion-41"
                  datetime="2020-03-26"
                >
                  05:15
                </time>
              </span>
            </div>
          </div>
          <div
            class="emotion-42 emotion-43"
          >
            <div
              class="emotion-44 emotion-45"
            >
              <h3
                class="emotion-46 emotion-47"
              >
                <a
                  aria-labelledby="scheduleItem-p086pmtq"
                  class="focusIndicatorDisplayBlock emotion-48 emotion-49"
                  href="/afrique/bbc_afrique_radio/w172x5n20y5f68g"
                >
                  <span
                    id="scheduleItem-p086pmtq"
                    role="text"
                  >
                    <span
                      class="emotion-50"
                    >
                      Ecoutez, 
                    </span>
                    Bulletin D'informations
                    <span
                      class="emotion-50"
                    >
                      , 05:15, 
                    </span>
                    <span
                      class="emotion-52 emotion-53"
                    >
                      26 mars 2020
                    </span>
                    <span
                      class="emotion-50"
                    >
                      , Durée 01,00 
                    </span>
                  </span>
                </a>
              </h3>
              <p
                class="emotion-55 emotion-56"
              >
                Le tour du monde de l'actualité en 2 minutes 
              </p>
            </div>
            <div
              class="emotion-57 emotion-58"
            >
              <span
                class="emotion-59 emotion-60"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-61 emotion-62"
                  focusable="false"
                  height="12px"
                  viewBox="0 0 13 12"
                  width="13px"
                >
                  <path
                    d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
                  />
                  <path
                    d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
                  />
                </svg>
              </span>
              <time
                class="emotion-63 emotion-64"
                datetime="PT1M"
                dir="ltr"
              >
                <span
                  aria-hidden="true"
                >
                  01:00
                </span>
              </time>
            </div>
          </div>
        </li>
        <li
          class="emotion-27 emotion-28 emotion-2"
          data-e2e="next"
          dir="ltr"
          role="listitem"
        >
          <div
            class="emotion-30 emotion-31"
          >
            <div
              class="emotion-32 emotion-33"
            >
              <span
                class="emotion-34 emotion-35"
                dir="ltr"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-36 emotion-37"
                  focusable="false"
                  height="13"
                  viewBox="0 0 13 13"
                  width="13"
                >
                  <path
                    d="M6.5 0A6.5 6.5 0 1013 6.5 6.5 6.5 0 006.5 0zm0 11.5a5 5 0 115-5 5 5 0 01-5 5z"
                  />
                  <path
                    d="M7.34 2.9h-1v3.8L9.4 8.57l.41-.56-2.47-1.89V2.9z"
                  />
                </svg>
              </span>
              <span
                aria-hidden="true"
                class="emotion-38 emotion-39"
                dir="ltr"
              >
                <time
                  class="emotion-40 emotion-41"
                  datetime="2030-01-01"
                >
                  09:00
                </time>
              </span>
            </div>
          </div>
          <div
            class="emotion-42 emotion-43"
          >
            <div
              class="emotion-44 emotion-45"
            >
              <h3
                class="emotion-160 emotion-47"
              >
                <span
                  id="scheduleItem-p086pmtv"
                  role="text"
                >
                  <span
                    class="emotion-50"
                  >
                    Listen Next, 
                  </span>
                  <span
                    aria-hidden="true"
                    class="emotion-163 emotion-164"
                    dir="ltr"
                  >
                    SUIVANT 
                  </span>
                  A Vous L'antenne
                  <span
                    class="emotion-50"
                  >
                    , 09:00, 
                  </span>
                  <span
                    class="emotion-166 emotion-53"
                  >
                    1 janvier 2030
                  </span>
                  <span
                    class="emotion-50"
                  >
                    , Durée 15,00 
                  </span>
                </span>
              </h3>
              <p
                class="emotion-55 emotion-56"
              >
                Du lundi au vendredi les auditeurs réagissent à chaud sur les sujets qui rythment l'actualité 
              </p>
            </div>
            <div
              class="emotion-171 emotion-58"
            >
              <span
                class="emotion-173 emotion-60"
              >
                <svg
                  aria-hidden="true"
                  class="emotion-61 emotion-62"
                  focusable="false"
                  height="12px"
                  viewBox="0 0 13 12"
                  width="13px"
                >
                  <path
                    d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
                  />
                  <path
                    d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
                  />
                </svg>
              </span>
              <time
                class="emotion-63 emotion-64"
                datetime="PT15M"
                dir="ltr"
              >
                <span
                  aria-hidden="true"
                >
                  15:00
                </span>
              </time>
            </div>
          </div>
        </li>
      </div>
    </div>
  </section>
</div>
`;