.hero-sub-topic.component {
  overflow: hidden;
  background-color: #ffffff;
  color: #000000;
}
.hero-sub-topic .hero-subtopic-topic__picture {
  display: flex;
  height: 240px;
}
.hero-sub-topic .hero-subtopic-topic__illustration {
  display: flex;
  height: 150px;
}
.hero-sub-topic .hero-sub-topic__gradient {
  background-image: linear-gradient(to right, #0090da 0%, #a4ce4e 104%);
  height: 25px;
}
.hero-sub-topic .hero-sub-topic__background {
  background-color: #ffffff;
}
.hero-sub-topic .hero-sub-topic__content {
  padding-top: 24px;
}
.hero-sub-topic .hero-sub-topic__eyebrow {
  color: #333333;
  padding-bottom: 8px;
}
.hero-sub-topic .hero-sub-topic__title {
  padding-bottom: 8px;
}
.hero-sub-topic .hero-sub-topic__btn {
  padding-top: 24px;
  padding-bottom: 8px;
}
.hero-sub-topic .hero-sub-topic__copy {
  padding-top: 16px;
}
@media screen and (min-width: 768px) {
  .hero-sub-topic .hero-subtopic-topic__picture {
    height: 300px;
  }
  .hero-sub-topic .hero-sub-topic__background {
    margin-top: -30px;
  }
  .hero-sub-topic .hero-subtopic-topic__illustration {
    height: 200px;
  }
  .hero-sub-topic .hero-sub-topic__gradient {
    height: 10px;
  }
  .hero-sub-topic .hero-sub-topic__content {
    padding-top: 48px;
  }
}
@media screen and (min-width: 1024px) {
  .hero-sub-topic .hero-subtopic-topic__picture {
    height: 400px;
  }
  .hero-sub-topic .hero-subtopic-topic__illustration {
    height: 250px;
  }
  .hero-sub-topic .hero-sub-topic__background {
    margin-top: -30px;
  }
  .hero-sub-topic .hero-sub-topic__content {
    display: flex;
    align-items: center;
  }
}
body[dir="rtl"] .hero-sub-topic .hero-sub-topic__gradient {
  background-image: linear-gradient(to left, #0090da 0%, #a4ce4e 104%);
}