.hero-detail .component {
  position: relative;
}
.hero-detail .component__background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.hero-detail .component__background.light-background {
  background-color: #ffffff;
}
.hero-detail .component__background.lightgray-background {
  background-color: #fbfaf8;
}
.hero-detail .component__background.dark-background {
  background-color: #01444c;
}
.hero-detail .component__headline-content {
  padding-bottom: 32px;
}
.hero-detail .component__headline-section.light-background .component__headline,
.hero-detail .component__headline-section.light-background .component__headline-copy,
.hero-detail .component__headline-section.light-background .component__readmore-link {
  color: #003652;
}
.hero-detail .component__headline-section.light-background .component__readmore-link > svg.icon {
  fill: #003652;
}
.hero-detail .component__headline-section.lightgray-background .component__headline,
.hero-detail .component__headline-section.lightgray-background .component__headline-copy,
.hero-detail .component__headline-section.lightgray-background .component__readmore-link {
  color: #003652;
}
.hero-detail .component__headline-section.lightgray-background .component__readmore-link > svg.icon {
  fill: #003652;
}
.hero-detail .component__headline-section.dark-background .component__headline,
.hero-detail .component__headline-section.dark-background .component__headline-copy,
.hero-detail .component__headline-section.dark-background .component__readmore-link {
  color: #ffffff;
}
.hero-detail .component__headline-section.dark-background .component__readmore-link:focus {
  text-decoration: none;
  outline-color: #ffffff;
  outline-offset: 4px;
  outline-style: solid;
  outline-width: 2px;
}
.hero-detail .component__headline {
  padding-top: 80px;
}
.hero-detail .component__headline-copy {
  margin-top: 16px;
}
.hero-detail .component__cta-button {
  margin-top: 32px;
}
.hero-detail .component:not( :has(.component__cta-button)) .component__readmore-link {
  margin-top: 32px;
}
.hero-detail .component__readmore-wrapper {
  display: inline-flex;
}
.hero-detail .component__readmore-link {
  margin-top: 16px;
}
.hero-detail .component__image {
  width: 100%;
  margin-top: 48px;
  height: auto;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 0.8;
}
@media screen and (max-width: 767px) {
  .hero-detail .component__headline-content {
    padding-bottom: 32px;
  }
  .hero-detail .component__headline {
    padding-top: calc(76px);
  }
  .hero-detail .component__cta-button {
    width: auto;
  }
  .hero-detail .component__image-section {
    padding-bottom: 24px;
  }
  .hero-detail .component__image {
    margin-top: 0px;
  }
}
@media screen and (min-width: 768px) {
  .hero-detail .component.text-and-image.overlapping-enabled {
    margin-bottom: 0px;
  }
}
@media screen and (max-width: 767px) {
  body:not(:has(.bread-crumb)) .hero-detail .component__headline {
    padding-top: 48px;
  }
}