.hero {
  position: relative;
  isolation: isolate;
  /* Override the generic `main > section` spacing rule: the hero banner
     is a full-bleed block, its image must reach the section's edges. */
  padding-block: 0;
}

.hero__media {
  position: relative;
  width: 100%;
  min-height: 560px;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  /* From tablet up there's ample width for the hero content to fit within
     each image's own natural (cropped) height, so let every hero image
     display at its own aspect ratio instead of forcing one shared ratio
     that would re-crop images whose crop amount differs page to page. */
  .hero__media {
    min-height: 0;
  }
  .hero__image {
    position: static;
    width: 100%;
    height: auto;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,15,16,0.55) 0%, rgba(9,15,16,0.78) 65%, rgba(18,18,18,0.95) 100%);
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-block: 1.5rem;
}

.hero__breadcrumb {
  margin-bottom: 0.25rem;
}

.hero__badge {
  align-self: flex-start;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-heading);
  color: var(--color-white);
  line-height: 1.2;
  max-width: 20ch;
}

.hero__subtitle {
  color: var(--color-white);
  font-size: var(--fs-body);
  max-width: 60ch;
  opacity: 0.9;
}

.hero__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .hero__title { max-width: 26ch; }
}