.nine-nine-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--nine-nine-hero-ratio, 0.93);
  background-color: var(--nine-nine-ink-raised);
}

.nine-nine-hero .nine-nine-hero-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.nine-nine-hero .nine-nine-hero-link:focus-visible {
  outline: 2px solid var(--nine-nine-brand);
  outline-offset: -4px;
}

.nine-nine-hero .nine-nine-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.nine-nine-hero .nine-nine-hero-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.nine-nine-hero .nine-nine-hero-placeholder {
  fill: var(--nine-nine-dim);
}

@media screen and (min-width: 1024px) {
  .nine-nine-hero {
    aspect-ratio: var(--nine-nine-hero-ratio-desktop, 2.4);
  }
}