/* Fixes to reduce hero image cropping and set focal point */
.hero .image-frame img{
  object-position: center center;
}
.hero .image-frame{
  min-height: 0;
  /* let the image determine height; reduce fixed spacing */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .image-frame img{
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
}

/* Let the hero artwork keep its natural aspect ratio on mobile. */
@media(max-width:860px){
  .hero .image-frame,
  .hero .image-frame img{
    height:auto;
    min-height:0;
    object-fit:contain;
  }
}

/* Fix logo square corners showing outside round container */
.logo{overflow:hidden}
.logo img{border-radius:50%;object-fit:cover}

/* Keep the hero close to the navigation on tablet-sized screens. */
@media(max-width:1100px){
  .hero{
    min-height:0;
    align-items:start;
  }
  .hero-grid{
    padding-top:var(--page-top-gap);
  }
}

@media(max-width:1100px) and (orientation:portrait){
  .hero-grid{
    padding-top:var(--page-top-gap);
  }
}