:root {
  --hero-header-bg-color: var(--bs-primary);
  --hero-header-image-color: var(--bs-primary);
}

.hero-header-image {
  position: relative;
  overflow: clip;
  z-index: -1;
  background-color: var(--hero-header-bg-color);
}
.hero-header-image figure,
.hero-header-image picture {
  width: 100%;
  height: 100%;
}
.hero-header-image__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-header-image__content {
   position: absolute;
   bottom: 10rem;
   width: 100%;
 }
.hero-header-image__title,
.hero-header-image__subtitle {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 2.25rem;
  color: var(--hero-header-image-color);
}
.hero-header-image__subtitle {
  font-size: 1.25rem;
}

@media screen and (min-width: 768px) {
  .hero-header-image__content {
    bottom: 12rem;
  }
  .hero-header-image__title,
  .hero-header-image__subtitle {
    font-size: 4.25rem;
  }
}

@media screen and (min-width: 1920px) {
  .hero-header-image__title,
  .hero-header-image__subtitle {
    font-size: 5.625rem;
  }
  .hero-header-image__subtitle {
    font-size: 3.25rem;
  }
}