/* Align the five section-page hero images with the homepage banner dimensions. */
body.homepage-banner-size main > .hero,
body.homepage-banner-size main > .heritage-hero,
body.homepage-banner-size main > .party-hero {
  width: 100%;
  height: 480px;
  background-size: cover;
}

/* These two illustrated banners contain lettering inside the artwork. Keep the
   complete artwork visible instead of cropping it at desktop widths. */
body.homepage-banner-size.image-banner-page main > .hero {
  background-size: 100% 100%;
}

body.homepage-banner-size main > .hero .hero-inner,
body.homepage-banner-size main > .heritage-hero .heritage-hero-inner,
body.homepage-banner-size main > .party-hero .party-hero-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

body.homepage-banner-size main > .hero .hero-inner {
  padding-top: 0;
  padding-bottom: 0;
}

body.homepage-banner-size main > .heritage-hero .heritage-hero-inner,
body.homepage-banner-size main > .party-hero .party-hero-inner {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 900px) {
  body.homepage-banner-size main > .hero,
  body.homepage-banner-size main > .heritage-hero,
  body.homepage-banner-size main > .party-hero {
    height: 380px;
  }
}

@media (max-width: 768px) {
  body.homepage-banner-size main > .hero,
  body.homepage-banner-size main > .heritage-hero,
  body.homepage-banner-size main > .party-hero {
    height: 260px;
  }
}

@media (max-width: 760px) {
  body.homepage-banner-size.image-banner-page main > .hero {
    background-size: cover;
  }
}