.headline-breaker.component {
  color: #ffffff;
  position: relative;
}
.headline-breaker .topic-hero__container {
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  align-self: stretch;
}
.headline-breaker .topic-hero__container .headline-breaker__content {
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.headline-breaker .headline-breaker__container {
  padding: 48px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  align-self: stretch;
}
.headline-breaker .headline-breaker__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.headline-breaker .headline-breaker__eyebrow-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.headline-breaker .headline-breaker__image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
}
.headline-breaker .headline-breaker__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  align-self: stretch;
}
.headline-breaker .headline-breaker__title {
  margin-bottom: 0;
}
.headline-breaker .filmstrip__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  display: block;
}
.headline-breaker .filmstrip__container .filmstrip__container-barOne {
  height: 35%;
  width: 20px;
  background-color: #007abc;
}
.headline-breaker .filmstrip__container .filmstrip__container-barTwo {
  height: 30%;
  width: 20px;
  background-color: #0061a0;
}
.headline-breaker .filmstrip__container .filmstrip__container-barThree {
  height: 35%;
  width: 20px;
  background-color: #a4ce4e;
}
.headline-breaker .headline-breaker__playButton {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  margin-top: 30px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.headline-breaker .headline-breaker__playButton .icon-arrow-right-triangle {
  height: 22px;
  width: 22px;
  color: #ffffff;
  fill: #ffffff;
  pointer-events: none;
}
.headline-breaker .headline-breaker__playButton .icon-arrow-right-triangle:hover,
.headline-breaker .headline-breaker__playButton .icon-arrow-right-triangle:focus {
  color: #000000;
  fill: #000000;
}
.headline-breaker .headline-breaker__playButton:hover,
.headline-breaker .headline-breaker__playButton:focus {
  border: 1px solid #ffffff;
  background-color: #ffffff;
}
.headline-breaker .headline-breaker__playButton:hover .icon-arrow-right-triangle,
.headline-breaker .headline-breaker__playButton:focus .icon-arrow-right-triangle {
  color: #000000;
  fill: #000000;
}
@media screen and (max-width: 767px) {
  .headline-breaker .topic-hero__container .headline-breaker__content {
    padding-left: 0px;
  }
  .headline-breaker .topic-hero__container .headline-breaker__subtitle {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .headline-breaker .headline-breaker__playButton {
    margin-top: 40px;
  }
}
@media screen and (min-width: 1300px) {
  .headline-breaker .topic-hero__container .headline-breaker__content {
    padding-bottom: 150px;
  }
}
@media screen and (max-width: 1023px) {
  .headline-breaker .filmstrip__container {
    width: 16px;
  }
  .headline-breaker .filmstrip__container .filmstrip__container-barOne {
    width: 16px;
  }
  .headline-breaker .filmstrip__container .filmstrip__container-barTwo {
    width: 16px;
  }
  .headline-breaker .filmstrip__container .filmstrip__container-barThree {
    width: 16px;
  }
}
.keyboard-active .headline-breaker .headline-breaker__cta .btn:focus {
  outline-offset: -4px;
}
body[dir="rtl"] .headline-breaker .filmstrip__container {
  right: 0;
  left: initial;
}
@media screen and (max-width: 767px) {
  body[dir="rtl"] .headline-breaker .headline-breaker__content {
    padding: 60px 20px 60px 0;
  }
  body[dir="rtl"] .headline-breaker .topic-hero__container .headline-breaker__content {
    padding-right: 0px;
    padding-left: initial;
  }
}
@media screen and (min-width: 1024px) {
  body[dir="rtl"] .headline-breaker .topic-hero__container .headline-breaker__content {
    padding-right: 45px;
    padding-left: initial;
  }
}