.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(200px, 55vw, 300px);
  background-color: var(--color-bg-dark);
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.5) 0%, rgba(18, 18, 18, 0.88) 100%), var(--hero-image);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  padding-block: 1.5rem;
  text-align: center;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.breadcrumb { padding-block: 0 1rem; }
.breadcrumb__list { justify-content: center; }

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-heading-accent);
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.hero__title {
  max-width: 48rem;
  margin-bottom: 1rem;
}
.hero__subtitle {
  max-width: 40rem;
  font-size: 1.05rem;
  color: var(--color-text-main);
  margin-bottom: 1.75rem;
}
.hero__cta { margin-bottom: 0.25rem; }

@media (min-width: 768px) {
  .hero {
    min-height: clamp(300px, 30vw, 500px);
    padding-block: 2rem;
    background-size: cover, contain;
  }
}