/* Long titles may grow without forcing the adjacent media to match their height. */
.service-directory-hero h1,
.money-hero h1,
.expert-directory-hero h1,
.expert-detail-hero h1,
.about-hero h1,
.contact-hero h1{
  text-wrap:balance;
}

@media(min-width:801px){
  .service-directory-hero-grid,
  .about-hero-grid{
    align-items:center;
  }

  .service-directory-visual{
    align-self:center;
    width:100%;
    min-height:0;
    max-height:520px;
    aspect-ratio:4/3;
  }

  .service-directory-visual img{
    height:100%;
    min-height:0;
    object-fit:cover;
  }

  .about-hero-image{
    align-self:center;
    width:100%;
    max-height:480px;
    aspect-ratio:16/10;
  }

  .about-hero-image img{
    height:100%;
    object-fit:cover;
  }

  .money-hero-grid.has-image,
  .expert-detail-grid{
    align-items:center;
  }

  .money-hero-image,
  .expert-detail-photo{
    align-self:center;
  }
}

@media(min-width:821px) and (max-width:1280px){
  .service-directory-hero-grid{
    grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr);
  }

  .money-hero-grid.has-image{
    grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
    gap:clamp(32px,4vw,52px);
  }

  .about-hero-grid{
    grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
  }

  .expert-detail-grid{
    grid-template-columns:minmax(0,1.15fr) minmax(250px,300px);
    gap:clamp(34px,5vw,58px);
  }
}

@media(min-width:701px) and (max-width:900px){
  .service-directory-hero-grid{
    grid-template-columns:1fr;
    min-height:0;
    align-items:start;
  }

  .service-directory-hero-copy{
    padding:34px 0 28px;
  }

  .service-directory-visual{
    width:100%;
    height:auto;
    min-height:0;
    max-height:280px;
    aspect-ratio:16/7;
  }

  .service-directory-visual img{
    min-height:0;
  }

  .service-directory-visual blockquote{
    top:14%;
    left:5%;
  }
}

@media(max-width:800px){
  .service-directory-hero-grid,
  .about-hero-grid,
  .expert-detail-grid{
    align-items:start;
  }

  .service-directory-visual,
  .about-hero-image,
  .money-hero-image,
  .expert-detail-photo{
    align-self:start;
  }

  .expert-detail-photo{
    width:min(100%,420px);
    max-height:360px;
    aspect-ratio:4/3;
  }

  .expert-detail-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

@media(max-width:700px){
  .service-directory-visual{
    width:100%;
    height:auto;
    min-height:0;
    max-height:190px;
    aspect-ratio:16/9;
  }

  .service-directory-visual img{
    min-height:0;
  }
}