/* Homepage only: reveal the original portraits; retain shade behind the copy. */
.hero .hero-mosaic img {
  opacity: 1;
  filter: none;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(4, 4, 3, .72) 0%, rgba(8, 8, 7, .60) 44%, rgba(8, 8, 7, .12) 72%, rgba(4, 4, 3, .06) 100%),
    linear-gradient(0deg, rgba(4, 4, 3, .60), transparent 48%);
}

.hero-copy p,
.hero-kicker,
.hero-caption {
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .6);
}

@media (max-width: 640px) {
  /* WebKit otherwise resolves the image's 100% height to the whole hero. */
  .hero-mosaic {
    height: 100%;
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .hero .hero-mosaic img {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    align-self: stretch;
  }

  .hero::after {
    background: linear-gradient(0deg, rgba(4, 4, 3, .90) 0%, rgba(5, 5, 4, .68) 45%, rgba(5, 5, 4, .32) 70%, rgba(5, 5, 4, .06) 100%);
  }
}