.hero {
  --hero-height: calc(100svh - var(--header-height));
  position: relative;
}

:root[data-hero]:not([data-hero="marquee"]) .hero-marquee > * {
  visibility: hidden;
}

.hero-button {
  padding: 0;
  border: 0;
  background: none;
  font: var(--text-caption-ac);
  letter-spacing: var(--text-caption-ac-tracking);
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: color var(--duration-hover) var(--ease-reveal);
}

.hero-button:hover {
  color: var(--content-secondary);
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}