.ebmnt1-hero {
  justify-content: center;
  min-height: clamp(34rem, 90vh, 56rem);
  background-color: var(--ebmnt1-hero-bg-color);
  background-image: var(--ebmnt1-hero-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ebmnt1-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--ebmnt1-hero-overlay-mobile-color);
  z-index: 1;
}

.ebmnt1-hero__inner {
  align-items: flex-start;
  text-align: start;
}

.ebmnt1-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
  width: 100%;
  max-width: 46.25em;
}

.ebmnt1-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--ebmnt1-font-size-badge);
  font-weight: var(--ebmnt1-font-weight-semibold);
  line-height: 1.4;
  color: var(--ebmnt1-hero-badge-text-color);
  background-color: var(--ebmnt1-hero-badge-bg-color);
  backdrop-filter: blur(1.25em);
  -webkit-backdrop-filter: blur(1.25em);
  border-radius: var(--ebmnt1-radius-pill);
  padding: 0.5em 1em;
}

.ebmnt1-hero__badge::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--ebmnt1-radius-circle);
  background-color: var(--ebmnt1-hero-badge-dot-color);
}

.ebmnt1-hero__title {
  font-size: var(--ebmnt1-font-size-hero-title);
  line-height: 1.35;
  color: var(--ebmnt1-hero-title-text-color);
}

.ebmnt1-hero__text {
  font-size: var(--ebmnt1-font-size-lead);
  color: var(--ebmnt1-hero-text-color);
  max-width: 38em;
}

.ebmnt1-hero__features {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  width: 100%;
}

.ebmnt1-hero__feature {
  display: flex;
  align-items: center;
  gap: 0.9em;
  --ebmnt1-icon-size: 3.75em;
  --ebmnt1-icon-bg: var(--ebmnt1-hero-feature-icon-bg-color);
  --ebmnt1-icon-color: var(--ebmnt1-hero-feature-icon-color);
  --ebmnt1-icon-fill: var(--ebmnt1-hero-feature-icon-hover-bg-color);
}

.ebmnt1-hero__feature-title {
  font-size: var(--ebmnt1-font-size-card-title);
  line-height: 1.4;
  color: var(--ebmnt1-hero-feature-title-color);
}

.ebmnt1-hero__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
  width: 100%;
  margin-block-start: 0.5em;
  border-top: 1px solid var(--ebmnt1-hero-divider-color);
  padding-block-start: 1.75em;
}

/* hero call-to-action (booking + whatsapp) */
.ebmnt1-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em 1.75em;
}

.ebmnt1-hero__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9em;
  color: var(--ebmnt1-hero-rating-text-color);
}

.ebmnt1-hero__avatars {
  display: flex;
  align-items: center;
}

.ebmnt1-hero__avatar {
  width: 2.5em;
  aspect-ratio: 1;
  margin-inline-start: -0.6em;
  border: 1px solid var(--ebmnt1-hero-avatar-border-color);
  border-radius: var(--ebmnt1-radius-circle);
  object-fit: cover;
}

.ebmnt1-hero__avatar:first-child {
  margin-inline-start: 0;
}

.ebmnt1-hero__avatar-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  aspect-ratio: 1;
  margin-inline-start: -0.6em;
  border: 1px solid var(--ebmnt1-hero-avatar-border-color);
  border-radius: var(--ebmnt1-radius-circle);
  font-size: 0.9em;
  color: var(--ebmnt1-hero-avatar-more-icon-color);
  background-color: var(--ebmnt1-hero-avatar-more-bg-color);
}

.ebmnt1-hero__rating-info {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  line-height: 1.4;
}

.ebmnt1-hero__stars {
  display: flex;
  gap: 0.2em;
  font-size: 0.85em;
  color: var(--ebmnt1-hero-rating-star-color);
}

.ebmnt1-hero__rating-text {
  font-size: var(--ebmnt1-font-size-small);
  font-weight: var(--ebmnt1-font-weight-semibold);
}

@media (min-width: 425px) {
  .ebmnt1-hero__features {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ebmnt1-hero__feature {
    flex: 1 1 14em;
  }
}

@media (min-width: 768px) {
  .ebmnt1-hero__overlay {
    background: linear-gradient(90deg, var(--ebmnt1-hero-overlay-start-color) 19.79%, var(--ebmnt1-hero-overlay-end-color) 83.96%);
  }

  .ebmnt1-hero__footer {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5em 3.75em;
  }
}