/* Photo collage for the Descreened homepage hero. */
.hero.home-collage-hero {
  min-height: min(90dvh, 900px);
  padding: clamp(118px, 10vw, 154px) var(--gutter) clamp(55px, 7vw, 90px);
  isolation: isolate;
}
.home-collage-hero .hero-float,
.home-collage-hero .cursor-tag { display: none; }
.home-collage-hero .hero-inner { z-index: 2; }
.home-collage-hero .hero-intro { margin-bottom: 34px; }
.home-collage-hero .hero-tagline {
  margin-top: clamp(64px, 10vh, 100px);
  font-size: clamp(2rem, 3vw, 3rem);
}
.home-collage-hero .hero-collage {
  position: absolute;
  inset: 34px 0 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.home-collage-hero .hero-polaroid {
  position: absolute;
  width: clamp(195px, 19.5vw, 310px);
  margin: 0;
  padding: 9px 9px 36px;
  background: #f4f2ed;
  border: 1px solid #fff;
  box-shadow: 0 8px 18px rgba(19, 29, 24, .11);
  transform: rotate(var(--tilt));
}
.home-collage-hero .hero-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: .94;
  object-fit: cover;
  object-position: center;
}
.home-collage-hero .photo-one { left: -5%; top: 8%; --tilt: -12deg; }
.home-collage-hero .photo-two { left: 4%; top: 13%; --tilt: 6deg; }
.home-collage-hero .photo-three { left: -9%; top: 55%; --tilt: 2deg; }
.home-collage-hero .photo-four { left: 12%; top: 68%; --tilt: -16deg; }
.home-collage-hero .photo-five { right: 4%; top: 12%; --tilt: -16deg; }
.home-collage-hero .photo-six { right: -6%; top: 13%; --tilt: -3deg; }
.home-collage-hero .photo-seven { right: 13%; top: 57%; --tilt: -15deg; }
.home-collage-hero .photo-eight { right: -6%; top: 62%; --tilt: 9deg; }

@media (max-width: 1100px) and (min-width: 901px) {
  .home-collage-hero .hero-polaroid { width: clamp(170px, 19vw, 220px); }
  .home-collage-hero .photo-two { left: 3%; }
  .home-collage-hero .photo-five { right: 3%; }
}

@media (max-width: 900px) {
  .hero.home-collage-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 88px var(--gutter) 44px;
  }
  .home-collage-hero .hero-inner { order: 1; }
  .home-collage-hero .hero-tagline { margin-top: 44px; }
  .home-collage-hero .hero-collage {
    position: relative;
    inset: auto;
    order: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: min(100%, 760px);
    margin-top: 42px;
    padding: 10px 8px 20px;
    overflow: visible;
  }
  .home-collage-hero .hero-polaroid {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 5px 5px 19px;
  }
  .home-collage-hero .hero-polaroid img { aspect-ratio: .9; }
  .home-collage-hero .photo-one,
  .home-collage-hero .photo-two,
  .home-collage-hero .photo-six,
  .home-collage-hero .photo-eight { display: block; }
  .home-collage-hero .photo-three,
  .home-collage-hero .photo-four,
  .home-collage-hero .photo-five,
  .home-collage-hero .photo-seven { display: none; }
}

@media (max-width: 600px) {
  .hero.home-collage-hero { padding-top: 78px; }
  .home-collage-hero .hero-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 34px;
  }
  .home-collage-hero .hero-polaroid img { aspect-ratio: 1.15; }
  .home-collage-hero .hero-stat { max-width: 30ch; }
}