/* Фото на всю ширину, заголовок на затемнённой полосе внизу */
.banner {
  display: flex;
  align-items: flex-end;
  height: 563px;
  /* светлая вуаль поверх фото, как в оригинале */
  background:
    linear-gradient(rgba(160, 160, 160, 0.23), rgba(160, 160, 160, 0.23)),
    var(--banner-image) 50% var(--focus-y, 50%) / cover no-repeat,
    #555;
}

.banner__title {
  width: 100%;
  padding: 17px 0;
  background: rgba(0, 0, 0, 0.67);
  color: #fff;
  font: 400 63px/77px var(--font-head);
  text-align: center;
}

@media (max-width: 979px) {
  .banner {
    height: 210px;
  }

  .banner__title {
    padding: 10px 0;
    font-size: 32px;
    line-height: 40px;
  }
}