/* Homepage photos only. Does not affect quote logic or other pages. */
.hero-layout {
  display: grid;
  align-items: center;
  gap: 0.9rem;
}
.hero-figure,
.services-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: #e7edf5;
  box-shadow: var(--shadow);
}
.hero-figure {
  aspect-ratio: 16 / 9;
}
.hero-photo,
.services-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo {
  object-position: 58% 46%;
}
.services-intro {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.services-intro .section-head {
  margin-bottom: 0;
}
.services-photo {
  aspect-ratio: 3 / 2;
}
.services-photo img {
  object-position: 50% 40%;
}
@media (max-width: 719px) {
  .hero {
    padding-top: 0.7rem;
  }
  .hero .lede {
    margin-bottom: 0.45rem;
  }
  .hero-offer {
    margin-top: 0.45rem;
  }
  .hero-actions {
    margin-top: 0.6rem;
  }
  .hero-figure {
    max-height: 12.5rem;
  }
}
@media (min-width: 900px) {
  body.is-home .hero {
    padding-top: 2.25rem;
    padding-bottom: 1rem;
  }
  .hero-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(17rem, 0.92fr);
    gap: 1.75rem;
    align-items: stretch;
  }
  .hero-figure {
    height: 100%;
    min-height: 22rem;
    aspect-ratio: auto;
    max-height: none;
  }
  .hero-photo {
    min-height: 22rem;
    object-position: 64% 44%;
  }
  .services-intro {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 1.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .services-photo {
    aspect-ratio: 16 / 11;
    min-height: 16rem;
  }
}