.banner-block {
  position: relative;
}
.banner-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 27.45%);
  z-index: 3;
}
.banner {
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}
.banner__picture {
  min-height: 300px;
  max-height: 820px;
  width: 100%;
  height: 100%;
  grid-row: 1;
  grid-column: 1;
}
.banner__img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.banner__header {
  grid-column: 1;
  grid-row: 1;
  z-index: 20;
  position: relative;
  color: var(--color-white);
  align-self: end;
  padding-bottom: var(--block-vertical-padding);
}
.banner__heading {
  font-size: 1.75rem;
  font-size: clamp(1.75rem, 0.8500000000000001rem + 4.5vw, 6.25rem);
  line-height: 0.9;
  font-family: var(--font-family-secondary);
}

@media (min-width: 540px) {
  .banner {
    aspect-ratio: 1920 / 820;
    margin: 0 auto;
    z-index: 2;
  }
  .banner__header .grid__cell {
    grid-column: 1 / span 9;
  }
}

@media (min-width: 840px) {
  .banner__header .grid__cell {
    grid-column: 5 / span 8;
  }
}

@media (min-width: 1920px) {
  .banner {
    aspect-ratio: unset;
    height: 820px;
    overflow: hidden;
  }
}