.hero.hero-film {
  background: #183027 url('../assets/goa-1800.webp') center / cover no-repeat;
  color: #fff;
}

.hero.hero-film::after {
  background: linear-gradient(90deg, rgba(8, 26, 20, .86) 0%, rgba(8, 26, 20, .66) 56%, rgba(8, 26, 20, .42) 100%);
}

.hero-film-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-film .hero-manifesto { margin-bottom: 28px; }

.hero-film .hero-glass-button {
  min-height: 54px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.hero-film .hero-glass-button:hover {
  background: rgba(255, 255, 255, .25);
  border-color: #fff;
}

.hero-film .hero-glass-button:focus-visible {
  outline-color: #fff;
}

@media (min-width: 901px) {
  .hero.hero-film {
    height: calc(86svh - var(--header));
    min-height: min(600px, calc(100svh - var(--header) - 110px));
    max-height: 700px;
  }

  .hero-film + .journeys-list { padding-top: clamp(28px, 7svh, 64px); }
}

@media (min-width: 901px) and (max-height: 700px) {
  .hero.hero-film .hero-content { padding-top: 24px; padding-bottom: 24px; }
}

@media (max-width: 700px) {
  .hero.hero-film::after {
    background: linear-gradient(90deg, rgba(8, 26, 20, .88), rgba(8, 26, 20, .66));
  }
}