bunteshaus.de/themes/buha/assets/scss/banner.scss

.b {
  height: calc(89vh / 5 );
}
.b_index {
  height: calc(89vh / 4.5 );
}

.banner {
  width: 98vw;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 5rem;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .title_index {
    word-break: break-all;
    color: var(--text-main);
    background: var(--background-body-opaq);
    text-align: center;
    margin-bottom: 0;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
          0px 8px 13px rgba(0,0,0,0.1),
          0px 18px 23px rgba(0,0,0,0.1);
    
  }
  .title, {
    background: var(--background-body-opaq);
    word-break: break-all;
    color: var(--text-main);
    margin-bottom: 0;
    text-align: center;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
          0px 8px 13px rgba(0,0,0,0.1),
          0px 18px 23px rgba(0,0,0,0.1);
    
  }
}
.altbg {
  max-height: 5em;
}

@media (min-width: 640px) {
	.banner {
    width: 89%;
	margin-left: auto;
	margin-right: auto;
  }
  .b {
    height: calc(89vw / 3.5 );
  }
  .b_index {
    height: calc(89vw / 3 );
  }
  .altbg {
    max-height: 7em;
  }
}