/* Shared page banner (cocktail-recipes, where-to-buy, our-events): green Dela heading over a dimmed photo,
   followed by centred intro copy. Each page sets --pb-top (space above the heading) and --pb-gap
   (heading to intro) in its own stylesheet; --fit on the h1 (longest word in em) keeps long translated
   headlines inside a phone screen. */
.page-banner{position:relative;padding:var(--pb-top,280px) var(--pad) 0;text-align:center}
.page-banner__photo{position:absolute;top:0;left:0;z-index:0;width:100%;height:auto}
.page-banner h1{position:relative;z-index:2;padding-inline:20px;font-size:min(var(--h1),calc(92vw/var(--fit,1)))}
.page-banner .page-intro{margin-top:var(--pb-gap,90px)}
.page-banner~section{position:relative;z-index:1}
.page-intro{position:relative;z-index:2;max-width:1200px;margin:0 auto 124px;text-align:center}
.page-intro p+p{margin-top:1.3em}
@media (max-width:1199px){
  .page-banner{padding-top:var(--pb-top-md,220px)}
  .page-banner .page-intro{margin-top:var(--pb-gap-md,70px)}
  .page-intro{margin-bottom:80px}
}
@media (max-width:767px){
  .page-banner{padding-top:var(--pb-top-sm,176px)}
  .page-banner__photo{height:540px;object-fit:cover}
  .page-banner h1{padding-inline:0}
  .page-banner .page-intro{margin-top:var(--pb-gap-sm,62px)}
  .page-intro{margin-bottom:72px}
  .page-intro p+p{margin-top:1.6em}
}