.hero-banner {
  container-type: inline-size;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-banner-image {
  width: 100%; 
  z-index: 1;
}

.hero-banner-text {
  position: absolute;
  padding: 20px;
  top: 10%; 
  left: 0; 
  width: 100%; 
  z-index: 2;
  font-weight: bold;
  font-family: Arial;
  font-size: 5cqw;
}

.hero-banner-text-greetings {
  
}

.hero-banner-text-introduction {
  
}