.camp-hero {
  min-height: 700px;
  background-image: linear-gradient(90deg, rgba(6, 26, 85, .93) 0%, rgba(6, 26, 85, .69) 47%, rgba(6, 26, 85, .22)), url('assets/hero-community-diverse.png');
  background-position: 64% center;
}

.camp-hero .hero-content { max-width: 700px; }
.camp-hero .hero-date {
  display: inline-block;
  margin: 26px 0 0;
  padding: 10px 14px;
  border-left: 4px solid #d7b222;
  background: rgba(6, 26, 85, .5);
  color: #fff7d8;
  font: 700 clamp(15px, 1.45vw, 21px)/1.35 'DM Mono', monospace;
  letter-spacing: .025em;
}

.camp-hero .hero-buttons .button {
  padding: 18px 28px;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transform: translateZ(0);
}

.camp-hero .hero-buttons .button:hover,
.camp-hero .hero-buttons .button:focus-visible { transform: translateY(-3px); }

/* Later, replace the second background image above with camp photos or add a slideshow here. */

@media (max-width: 760px) {
  .camp-hero { min-height: 680px; background-position: 62% center; }
  .camp-hero .hero-content { max-width: 100%; }
  .camp-hero .hero-date { margin-top: 20px; padding: 9px 11px; font-size: 14px; line-height: 1.45; }
  .camp-hero .hero-buttons { gap: 18px; align-items: flex-start; }
  .camp-hero .hero-buttons .button { padding: 17px 20px; font-size: 15px; }
}