{# Image #}
  .banner-content__hero-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
  }

  /* Place text in the middle of the image */
  .banner-content__text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  padding: 0 0.5rem;
  text-align: center;
  /* long words issue */
  /* word-break: normal; */
  overflow-wrap: break-word;
  hyphens: auto;
  }
  @media only screen and (max-width: 768px) {
    .banner-content__overlay .banner-content__text,
    .banner-content__hero-image {
      height: 60vh !important;
    }
  }
  @media only screen and (max-width: 600px) {
    .banner-content__overlay .banner-content__text,
    .banner-content__hero-image {
      height: 40vh !important;
    }
  }