.hero-gallery {
  position: relative;
  isolation: isolate;
  gap: 3px;
  overflow: hidden;
  background: #0b0b0a;
}

.hero-gallery::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 11, 10, .42), transparent 30%),
    linear-gradient(180deg, rgba(11, 11, 10, .08), rgba(11, 11, 10, .3));
  content: "";
}

.hero-photo {
  position: relative;
  background-size: cover;
  filter: saturate(.76) contrast(1.04) brightness(.78);
  transition: filter .45s ease, transform .7s ease;
}

.hero-photo::after {
  position: absolute;
  inset: 0;
  background: rgba(7, 8, 7, .12);
  content: "";
}

.hero-gallery:hover .hero-photo {
  filter: saturate(.88) contrast(1.04) brightness(.84);
}

.hero-photo-main {
  background-image: url("../images/photos/academy-wide.jpg");
  background-position: 50% 64%;
  background-size: cover;
}

.hero-photo-bike {
  background-image: url("../images/photos/ducati-detail.jpg");
  background-position: 51% 47%;
  background-size: cover;
}

.hero-photo-tools {
  background-image: url("../images/photos/ducati-side.jpg");
  background-position: 51% 58%;
  background-size: cover;
}

@media (min-width: 900px) {
  .hero-copy {
    width: min(560px, calc(100% - 90px));
  }

  .hero .lead {
    max-width: 540px;
  }
}

@media (max-width: 899px) {
  .hero-gallery::after {
    background: linear-gradient(180deg, rgba(11, 11, 10, .1), rgba(11, 11, 10, .42));
  }
}

@media (max-width: 560px) {
  .hero-photo-main { background-position: 50% 62%; background-size: cover; }
  .hero-photo-bike { background-position: 51% 48%; background-size: cover; }
  .hero-photo-tools { background-position: 51% 58%; background-size: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { transition: none; }
}