.hero-media {
  background-image: url('assets/osm-hero-golf-event.jpeg');
  background-position: center center;
}

.brand img {
  width: 174px;
  height: auto;
  display: block;
  mix-blend-mode: screen;
}

.site-header::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 112px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.site-header > * { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .brand img { width: 144px; }
  .site-header::after { height: 92px; }
}