@media (min-width: 769px) {
  h1 {
    font-size: 42px;
  }
  body[data-revu-body-size="medium"] .brand {
  font-size: 15px;
  letter-spacing: 0.12em;
  }
}

@media (min-width: 961px) {
  h1 {
    font-size: 48px;
  }
  body[data-revu-body-size="medium"] .brand {
  font-size: 16px;
  letter-spacing: 0.10em;
  }
}

@media (min-width: 1201px) {
  h1 {
    font-size: 58px;
  }
  body[data-revu-body-size="medium"] .brand {
  font-size: 18px;
  letter-spacing: 0.08em;
  }
}

#appointmentCard, #customerCard, #resourceSelectionSummary {
  max-width: 920px;
}

body.template2 .brand {
  color: #fff;
}

.template2 #bookingPageHero {
  backdrop-filter: blur(9px);
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(15, 23, 42, 0.25) 0 16px 32px -24px;
}

body.template2[has-hero-bg] #bookingPageHero {
  background-color: #fffd;
}

body.template2 #brandLogo {
  height: 48px;
}

.template2 > header::before {
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0.18) 62%, rgba(0, 0, 0, 0.32) 100% );
}

.template2 > header {
  min-height: 340px;
  max-height: 340px;
  height: 340px;
}