/* Accommodate the source project's wide logo and five image banners. */
.headerLogo img { width: 240px; height: auto; max-height: 60px; object-fit: contain; }
.headerLogo { flex-shrink: 0; }
.bannerSlides { position: relative; }
.bannerSlide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease; }
.bannerSlide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.bannerSlide picture, .bannerSlide img { display: block; width: 100%; height: 100%; }
.bannerSlide img { object-fit: contain; background: #202029; }
.bannerNav { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgb(0 0 0 / 55%); color: #fff; width: 38px; height: 44px; border: 0; cursor: pointer; }
.bannerPrev { left: 12px; }
.bannerNext { right: 12px; }
.bannerDots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.bannerDot { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; background: rgb(0 0 0 / 40%); cursor: pointer; }
.bannerDot.active { background: #fff; }
.park-brochure-art { width: 160px; max-width: 100%; height: auto; margin: 0 auto 20px; display: block; }
.map-image-container { background: #fff; }
@media (max-width: 1280px) { .headerLogo img { width: 190px; } }
@media (max-width: 768px) {
  .headerLogo img { width: 180px; max-height: 46px; }
  .bannerImageSection { aspect-ratio: 1 / 1; }
}